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複製代碼