本篇文章将会介绍如何使用nodejs+vuejs构建个人博客。
主要分三部分内容：
环境准备
后端服务（主要提供admin及web端接口）
博客前端展示（web）
环境准备
nodejs
直接去官网下载最新的稳定版就好，以下为下载链接：https://nodejs.org/en/download/
vue-cli
这是一个强大的构建工具，使用它可以很方便的管理一个vue的项目，并且不需要更多的webpack配置。建议全局安装：
npm install --global vue-cli
mongodb
后端要用到的数据库。直接去官网下载对应系统的版本就好，注意要下载server版。下载地址：
首先创建一个基本的vue后端项目，可以使用以下命令：
vue create admin对于出现的一些选项，直接选择默认就可。
创建好后的目录结构如下：
使用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>的位置。
好了，这样当我们在浏览器输入"", CategoryEdit页面就会显示出来了。具体的页面内容在这里不介绍了。都是用的element-ui的组件。
由于篇幅有限，其他的页面在这里也不详细一一介绍了，具体源码已开源到GitHub。
最终的项目页面结构会是下面这样：
共分成三部分：分类管理、文章管理及用户管理。
对于页面中使用的接口，会在接下来的server部分介绍。
后端服务这部分采用nodejs + mongodb实现。
项目构建首先在根目录（与admin同级的目录）新建文件夹server。
新建一个package.json文件，可以使用以下命令初始化一个
npm init
全部选择默认即可。
依赖安装。后端主要会用到以下依赖。
"cors": "^2.8.5", // 允许跨域请求 "express": "^4.17.1", // 后端框架 "mongoose": "^5.6.12", // 数据库 "nodemon": "^1.19.2", // 当文件变更后会自动重启后端服务以上依赖安装完后新建一个index.js文件。
const express = require('express') const cors = require('cors') const app = express() // 允许跨域 app.use(cors()) app.use(express.json()) app.listen('3000', async(req, res) => { console.log("http://localhost:3000") })通过以下命令就可以启动后端服务了：
nodemon start index.js 路由定义新建一个router文件夹，然后新建admin文件夹作为admin端的接口，平级可以再建一个web文件夹作为web端的接口。在admin文件夹下新建index.js文件
module.exports = app => { const express = require('express') const router = express.Router() // 获取资源 router.get('/getData', async (req, res) => { res.send("hello world") }) app.use('/admin/api/rest', router) }注意这里导出的是一个函数，这样做有个好处就是可以传递参数进来，这里我们传入了app作为参数。
在根目录的index.js文件中需要引入一下：
require('./routers/admin/index')(app) // 直接执行函数并传入app作为参数当在浏览器中输入":3000/admin/api/rest/getData" 时，会看到"hello wrold"。
连接数据库