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. 專案示例和結構如下圖

時間軌跡

• 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複製程式碼