这是一个开源的个人blog项目.主要目的是玩一玩vue。大家可以在本项目中不仅仅可以学习了解以下的框架/库,同时还可以了解关于代码结构组织,模块化,前端构建等内容。这个项目才刚开始,我会带着大家完成整个blog项目的开发工作。
前端
- es6
- vue2
- webpack2
- vue-router2
- axios
- less
后端
- node
- mongoDB
node -v
v6.9.2
npm -v
3.10.9 1. fork本项目
2. git clone ...
3. cd x-blog
4. npm install (建议使用淘宝镜像)
5. npm run dev
6. 浏览器打开 localhost:3000/pages- 有任何问题可以在这里提
issue - 可以加入QQ群: 473540115. 暗号是: x-blog
some tips:
- 未接入后端前,前端使用
mock数据
完成post静态页面原型,修复webpack使用extractTextPlugin的正确姿势
添加about静态页面
- 添加
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文件。
- 添加
webpack生产环境配置信息
见webpack.config.prod.js文件。主要添加的内容为文件的hash,文件的打包及输出内容
tags页面添加vue-router路由动态匹配
- 添加mock数据, 见
lib/mock/db.json文件 - 完成
archive静态页面