Blog-Frontend-Project 使用教程

1、项目介绍

Blog-Frontend-Project 是一个基于 Vue.js 构建的前端博客项目，支持前后端分离和 SSR（服务端渲染）。该项目已经开发了17个页面，基本满足常规博客的需求，包括首页、文章首页、图集首页、电影首页、阅读首页等。项目使用了 Vue.js、Vue-Router、Vuex、Axios 等技术栈，并且集成了 iView UI、MavonEditor、Tocbot 等插件，提供了丰富的功能和良好的用户体验。

2、项目快速启动

2.1 克隆项目

首先，克隆项目到本地：

git clone https://github.com/LennonChin/Blog-Frontend-Project.git

2.2 安装依赖

进入项目目录并安装依赖：

cd Blog-Frontend-Project
npm install

2.3 配置后端支持

在项目根目录下，配置后端支持。你需要根据后端代码仓库 BlogBackendProject 进行线上配置。配置完成后，修改 /src/api/client-api.js 和 /src/api/server-api.js 文件中的接口配置。

例如：

// client-api.js
const request = axios.create({
  baseURL: process.env.NODE_ENV === 'development' ? 'https://localhost:8000/api/' : 'https://blog.coderap.com/api/'
});

// server-api.js
const request = axios.create({
  baseURL: process.env.NODE_ENV === 'development' ? 'https://localhost:8000/api/' : 'http://localhost/api/'
});

2.4 启动开发环境

运行以下命令启动开发环境：

npm run dev

开发服务器将在 localhost:9999 启动。

2.5 打包项目

运行以下命令进行生产环境打包：

npm run build

3、应用案例和最佳实践

3.1 应用案例

Blog-Frontend-Project 可以用于个人博客、技术博客、企业内部博客等多种场景。通过前后端分离的架构，可以轻松实现博客的扩展和定制。

3.2 最佳实践

• SSR 优化：项目已经支持 SSR，可以显著提升首屏加载速度和 SEO 效果。
• 第三方登录：可以接入 GitHub、微信、微博、Facebook 等第三方登录评论系统，提升用户体验。
• Markdown 编辑器：集成了 MavonEditor，支持 Markdown 语法，方便用户撰写文章。

4、典型生态项目

4.1 后端项目

• BlogBackendProject：该项目配合 Blog-Frontend-Project 使用，后端使用 Django + Xadmin + Django Rest Framework 实现，提供了完整的 API 支持。

4.2 其他相关项目

• Vue.js：前端核心框架，提供了丰富的组件和生态系统。
• iView UI：UI 组件库，提供了丰富的 UI 组件，方便快速开发。
• Axios：HTTP 请求库，用于与后端进行数据交互。

通过以上模块的介绍和快速启动指南，你可以快速上手并使用 Blog-Frontend-Project 搭建自己的博客系统。