手把手教你用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进行文件的编译，打包及构建，如何进行文件的组织。。（总之做为一个业余项目，你能跟下来的话确定能学到不少啦~~）

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