主要分三部分内容：

1. 环境准备
2. 博客后端管理系统（admin）
3. 后端服务（主要提供admin及web端接口）
4. 博客前端展示（web）

环境准备

• nodejs

  直接去官网下载最新的稳定版就好，以下为下载链接：
  https://nodejs.org/en/download/

• vue-cli

  这是一个强大的构建工具，使用它可以很方便的管理一个vue的项目，并且不需要更多的webpack配置。建议全局安装：
  npm install --global vue-cli

• mongodb

  后端要用到的数据库。直接去官网下载对应系统的版本就好，注意要下载server版。下载地址：
  http://downloads.mongodb.com/

博客后端管理系统

项目创建

首先创建一个基本的vue后端项目，可以使用以下命令：

    vue create admin

对于出现的一些选项，直接选择默认就可。
创建好后的目录结构如下：

router集成

使用vue-cli可以很方便的集成路由：

vue add router

注意，默认会采用history模式，为了以后方便些，这里要选择(n)即用hash模式，而不是浏览器的history模式。

element-ui集成

为了方便，后端的页面我们采用element-ui提供的一些组件实现，所以要把element-ui集成进来：

vue add element

提示选项，全部选择默认就可。

好了，到目前为止，后端项目的基本结构就算构建完成了。可以通过以下命令启动：

npm run serve

启动后的默认页面如下：

页面基本布局

可以采用element-ui的layout-container，直接把样例代码copy过来放到Home.vue 的template里面就可以。
但是这里有一点要注意，由于在切换左侧菜单的时候，我们希望只有右侧是变动的，左侧应该保持不变，所以这里需要用到<router-view>。把右侧变动的部分挂载到<router-view>这里。

新建分类页面

首先新建一个CategoryEdit.vue文件，然后添加路由。
路由这里需要注意，右侧的可变动的页面应该作为Home组件的子路由。
这样，CategoryEdit这个页面的内容就会显示在我们之前定义的<router-view>的位置。

好了，这样当我们在浏览器输入"http://localhost:8080/#/categories/create", CategoryEdit页面就会显示出来了。具体的页面内容在这里不介绍了。都是用的element-ui的组件。

由于篇幅有限，其他的页面在这里也不详细一一介绍了，具体源码已开源到GitHub。

最终的项目页面结构会是下面这样：

共分成三部分：分类管理、文章管理及用户管理。

对于页面中使用的接口，会在接下来的server部分介绍。

后端服务

这部分采用nodejs + mongodb实现。

项目构建

1. 首先在根目录（与admin同级的目录）新建文件夹server。
2. 新建一个package.json文件，可以使用以下命令初始化一个
   npm init
   全部选择默认即可。
3. 依赖安装。后端主要会用到以下依赖。

    "cors": "^2.8.5",       // 允许跨域请求     "express": "^4.17.1",   // 后端框架     "mongoose": "^5.6.12",  // 数据库