Skip to content

CommanderXL/x-blog

Repository files navigation

个人博客

这是一个开源的个人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静态页面

最近这2天有点忙,server端从周四开始更新,望大家理解