blog

项目来源

本项目来源于《腾讯云 Cloud Studio 实战训练营》的参赛作品 该作品在腾讯云 Cloud Studio 中运行无误。

MyBlog 项目

欢迎来到 MyBlog 项目！这是一个基于 Nuxt.js 构建的个人博客应用程序。

项目结构

blog
 |-- myblog
    |-- .editorconfig        // 代码编辑器的配置文件
    |-- .gitignore           // Git 版本控制忽略文件列表
    |-- README.md            // 项目的说明文档
    |-- nuxt.config.js       // Nuxt.js 的配置文件
    |-- package-lock.json    // npm 生成的锁定依赖版本的文件
    |-- package.json         // 包含项目的元数据和依赖的配置文件
    |-- tree.md              // 当前目录结构的文档
    |-- .nuxt                // Nuxt.js 自动生成的文件夹
    |   |-- App.js           // Nuxt.js 应用程序的入口文件
    |   |-- client.js        // Nuxt.js 客户端的入口文件
    |   |-- empty.js         // 空文件
    |   |-- index.js         // Nuxt.js 核心库的入口文件
    |   |-- jsonp.js         // JSONP 相关的功能代码
    |   |-- loading.html     // 页面加载中的 HTML 文件
    |   |-- middleware.js    // 中间件的代码
    |   |-- router.js        // 路由的配置文件
    |   |-- router.scrollBehavior.js  // 路由的滚动行为配置文件
    |   |-- routes.json      // 路由的配置文件（JSON 格式）
    |   |-- server.js        // Nuxt.js 服务器的入口文件
    |   |-- utils.js         // Nuxt.js 的工具函数
    |   |-- components       // Nuxt.js 自动生成的组件目录
    |   |-- layouts          // 页面布局文件目录
    |   |-- mixins           // Mixin 文件目录
    |   |-- vetur            // Vetur 插件的配置文件目录
    |   |-- views            // 视图文件目录
    |-- assets               // 静态资源文件目录
    |   |-- common.css       // 共享的 CSS 样式文件
    |   |-- login.css        // 登录页面的 CSS 样式文件
    |   |-- pat.svg          // PAT 图标文件（可能是用户名的缩写）
    |   |-- result.json      // 结果数据的 JSON 文件
    |   |-- img              // 图片目录
    |       |-- 1.jpg        // 图片文件
    |-- components           // 自定义组件目录
    |   |-- Clock.vue        // 时钟组件
    |   |-- NuxtLogo.vue     // Nuxt.js Logo 组件
    |   |-- Tutorial.vue     // 教程组件
    |-- layouts              // 页面布局文件目录
    |   |-- Myblog.vue       // "Myblog" 页面的布局文件
    |-- pages                // 页面文件目录
    |   |-- index.vue        // 主页
    |   |-- about            // 关于页面
    |   |   |-- index.vue    // 关于页面的主文件
    |   |-- login            // 登录页面
    |   |   |-- index.vue    // 登录页面的主文件
    |   |-- photo            // 照片页面
    |       |-- index.vue    // 照片页面的主文件
    |-- plugins              // 插件文件目录
    |   |-- element-ui.js    // Element UI 插件的配置文件
    |-- static               // 静态文件目录
    |   |-- favicon.ico      // 网站的图标文件
    |   |-- heng             // 文件夹
    |   |-- imgdata          // 图像数据文件夹
    |-- store                // Vuex 的状态管理目录
        |-- README.md        // 状态管理的说明文档

使用方法

1. 克隆或下载本项目到您的本地环境。

2. 在命令行中进入项目根目录。

3. 使用nvm 下载安装node 版本

   • nvm install 19.0.0
   • nvm use 19.0.0

4. 执行以下命令安装依赖：

npm install

5. 在项目根目录中执行以下命令以启动开发服务器：

npm run dev

5. 打开浏览器，访问 http://localhost:3000 即可预览博客应用程序。

功能介绍

• 主页（index）：展示博客的主要内容和列表。
• 关于页面（about）：提供关于作者的信息和介绍。
• 登录页面（login）：用户可以登录进入管理后台。
• 照片页面（photo）：展示精美照片的页面。

技术栈

• Vue.js：JavaScript 框架
• Nuxt.js：Vue.js 的通用应用框架
• Element UI：基于 Vue.js 的 UI 组件库

贡献

如果您对该项目有任何改进意见或功能建议，欢迎提交 Issue 或 Pull Request。