本篇文章将会介绍如何使用nodejs+vuejs构建个人博客。

主要分三部分内容：

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里面就可以。

但是这里有一点要注意，由于在切换左侧菜单的时候，我们希望只有右侧是变动的，左侧应该保持不变，所以这里需要用到。把右侧变动的部分挂载到这里。

新建分类页面

首先新建一个CategoryEdit.vue文件，然后添加路由。

路由这里需要注意，右侧的可变动的页面应该作为Home组件的子路由。

这样，CategoryEdit这个页面的内容就会显示在我们之前定义的的位置。

好了，这样当我们在浏览器输入"http://localhost:8080/#/categories/create