Vue.js打造一个开源的CNode社区

Vue.js打造一个开源的CNode社区

Vue.js打造一个开源的CNode社区，实现了浏览、发帖、新手入门、api等等功能。

源代码

源代码地址：👉 github.com/yaoyanweb/v…

欢迎你们star和fork😄

技术栈

• Vue2.0：前端页面展现。
• Vuex：Vuex，实现不一样组件间的状态共享
• vue-router：页面路由切换
• vue-resource：一个基于 Promise 的 HTTP 库，向后端发起请求。
• eleme-ui：饿了出品的UI框架。
• Express、Koa2：由于vue-cli生成的项目是基于express的，因此在开发阶段我使用的是它，可是真正上线生产环境我换成了Koa2。
• Moment.js：一个时间处理的库，方便对时间进行格式化成须要的格式，如主题、回复时间显示" 分钟前、 小时前、*天前"等等。
• ES6、ES7：采用ES6语法，这是之后的趋势。箭头函数、Promise等等语法很好用。
• localStorage：保存用户信息。
• Webpack：vue-cli自带Webpack，可是须要本身改造一下，好比要对须要安装sass相关loader，vue-cli已经配置好了webpack，你只须要安装依赖就能够，使用的时候只须要<style lang="scss"></style>。

总结

1. 组件状态多了用Vuex管理很方便，引用 Redux 的做者 Dan Abramov 的话说就是：

   Flux 架构就像眼镜：您自会知道何时须要它。

2. 事先必定要先想好整个页面组成，怎样去分组件开发，这样在开发阶段会事半功倍。

3. Moment.js在Vue中用ES6的方式引入会有问题，能够尝试在main.js尝试这样import moment from 'moment' Vue.prototype.moment = moment;给Vue的原型上添加moment，这样就能够在Vue的实例中随意使用它了。
4. 项目示例和结构以下图

Vue-CNode by microzz.com

Vue-CNode by microzz.com

Vue-CNode by microzz.com

时间轨迹

• 7.13：基本功能完成，后续完成登陆后的操做。
• 7.14：完成登陆以及侧边栏。

About

源代码地址：👉 GitHub

我的网站：👉 www.yaoweb.cn

GitHub：👉 yaoyanweb

Build Setup

# install dependencies
cnpm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report复制代码