/x-blog

个人博客

Primary LanguageVue

个人博客

这是一个开源的个人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数据

更新日志

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静态页面