手把手教你用es6+vue2+webpack2+vue-router2搭建个人blog

底下评论说是标题党，或者是光扔个github地址上来的同学我就不说什么了。你们有看看仓库的提交记录么？我还没有吃撑到开个仓库去骗star.我的出发点就是每天更新一部分代码，教大家用我所提到的技术栈搭建一个blog，我的出发点就是这么简单。这个项目才开始2天，就是每天晚上抽点时间写写，速度不会很快，这周末前将前端的静态页面和mock数据及webpack打包构建写完，下周开始写服务端的内容。

---

更新日志

2.14更新

完成post静态页面原型,修复webpack使用extractTextPlugin的正确姿势

2.15更新

添加about静态页面

2.16更新

• 添加json-server. 使用方法请戳我

主要作用就是在你开发环节在后端同学还未开发完成的情况下，提供一个mock backend server。

在我们还未开始写后端代码前，主要用这个backend server去模拟数据格式。

PS: 因为你webpack-dev-server占用了一个端口,那么json-server需要使用另外一个端口。
这个时候需要利用webpack-dev-server提供的proxy功能。

具体的配置信息，见webpack.config.dev.js文件

• 添加axios作为http资源库

其实vue对于开发者使用什么资源库没做什么限制。使用你顺手的就好了。

将axios集成进vue的方式见App.vue文件。

axios文档请戳我

vue添加插件的方法请戳我

2.18更新

• 添加webpack生产环境配置信息

见webpack.config.prod.js文件。主要添加的内容为文件的hash，文件的打包及输出内容

• tags页面添加vue-router路由动态匹配

使用方法请戳我

2.19更新

• 添加mock数据, 见lib/mock/db.json文件

• 完成archive静态页面

---

这是一个开源的个人blog项目。

前端的所使用的技术栈:

• es6

• vue2

• vue-router2

• webpack2

• axios

• less

后端:

• node

• mongoDB

这个小项目才开始，使用webpack2已经搭建好了前端开发环境, 及相应的vue的路由配置。接下来我会带着大家一起完成整个blog的开发工作。

如果你想学习vue2的基本套路及其生态, 如果你想学习如何使用webpack2进行文件的编译，打包及构建，如何进行文件的组织。。（总之作为一个业余项目，你能跟下来的话肯定能学到很多啦~~）

你还在等什么，赶紧上车吧~~~ 代码仓库请戳我

---