本篇文章将会介绍如何使用nodejs+vuejs构建个人博客。
主要分三部分内容:
- 环境准备
- 博客后端管理系统(admin)
- 后端服务(主要提供admin及web端接口)
- 博客前端展示(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