vue.js搭建个人博客

为何选择vue.js搭建博客

为什么会选择使用vue.js框架搭建博客呢？原因有多个。作为前后端分离的多数据绑定项目，首选的就是mvc 以及mvvm等框架，也就是主流的angular.js 和vue.js，之前有用angular.js 写过项目，但是数据的双向绑定并没有vue.js灵活；在使用vue.js框架快速完成美食网站后，更加离不开这个框架了，简单方便，易于管理和后期的维护。

个人博客框架

如图所示，页面整体可分为几大主模块，有首页、分类、实验室、赞赏、伙伴、留言板、关于、登录注册、用户个人中心，这些主模块通过路由跳转切换；然后还有几个公共模块，如头部和尾部，以及其他的一些公用模块，这些子模块嵌套在主模块中，用于公用样式和公用功能的实现。

项目基于node.js npm 安装vue-cli 脚手架后 的目录结构，如下图，根据项目的需求选择性的安装依赖和插件

搭建博客所安装的插件和依赖，如下图，我使用了 element-ui组件来开发样式，还有vue-resource和vue-router 以及css-loader等样式加载依赖，安装成功后，在webpack.config.js上写上相应的配置

得在上图中的routes完成主路由模块的配置，并且export出来，这里需要注意的是，可以通过component: resolve 来设置懒加载，对于带宽为1M的服务器来说，这点非常重要，不然打开页面需要好几分钟，还需要在webpack.config.js中注释掉 devtool: ‘#eval-source-map’，这个是项目webpack打包的时候设置的参数，使用webpack -p 这个命令打包，即为压缩打包，打包的文件更小，除去不需要的注释

接着是入口文件文件的配置，根据自己的需求，引入对应的模块和路由等文件

运行项目

使用命令窗口，cd到当前目录，使用npm run dev ，就可以打开运行项目，编辑项目保存的同时，页面会自动更新，即为实时监控。

模块化开发

之所以使用vue.js来开发博客项目，其中看中的一点就是模块化开发，就以打开页面的首页为例，如上面的结构介绍图，我分别使用了头部、尾部、右侧、文章列表这四个子模块组成，就如下图所示

子模块的结构和主模块一样，如果子模块中还需嵌套子模块，同上面一样

按照上面的步骤根据自己的需求添加自己的模块，整个博客网站就搭建完成啦，是不是很简单呢！如果需要了解vue.js具体的api 和element-ui组件的用法，可以访问官方网站，都有详细的说明哦！

博客地址： http://mangoya.cn
需要看详细文档的，这里有github 地址 https://github.com/Aimee1608