8

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

 4 years ago
source link: https://segmentfault.com/a/1190000008341186
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

底下评论说是标题党，或者是光扔个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项目。

前端的所使用的技术栈:

  • vue-router2

  • webpack2

  • axios

  • mongoDB

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

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

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

图片描述


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK