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

发布时间:2019-05-28 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了手把手教你用es6+vue2+webpack2+vue-router2搭建个人blog脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

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


更新日志

2.14更新

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

2.15更新

添加about静态页面

2.16更新

主要作用就是在你开发环节在后端同学还未开发完成的情况下,提供一个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

后端:

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

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

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

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


脚本宝典总结

以上是脚本宝典为你收集整理的手把手教你用es6+vue2+webpack2+vue-router2搭建个人blog全部内容,希望文章能够帮你解决手把手教你用es6+vue2+webpack2+vue-router2搭建个人blog所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:es6Vue