手把手教你用es6+vue2+webpack2+vue-router2搭建个人blog
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.
底下评论说是标题党,或者是光扔个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
文件。
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
进行文件的编译,打包及构建,如何进行文件的组织。。(总之作为一个业余项目,你能跟下来的话肯定能学到很多啦~~)
你还在等什么,赶紧上车吧~~~ 代码仓库请戳我
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK