Vue.js打造一個開源的CNode社區

Vue.js打造一個開源的CNode社區

Vue.js打造一個開源的CNode社區，實現了瀏覽、發帖、收藏、回覆、點贊、我的中心等等功能。

源代碼

源代碼地址：👉 github.com/microzz/vue…

歡迎你們star和fork😄

預覽

在線預覽地址：👉 microzz.com/vue-cnode/

手機端VueCNode - microzz.com

PC端VueCNode - microzz.com

技術棧

• Vue2.0：前端頁面展現。
• Vuex：Vuex，實現不一樣組件間的狀態共享
• vue-router：頁面路由切換
• axios：一個基於 Promise 的 HTTP 庫，向後端發起請求。
• Express、Koa2：由於vue-cli生成的項目是基於express的，因此在開發階段我使用的是它，可是真正上線生產環境我換成了Koa2。
• Moment.js：一個時間處理的庫，方便對時間進行格式化成須要的格式，如主題、回覆時間顯示" 分鐘前、 小時前、*天前"等等。
• ES6、ES7：採用ES6語法，這是之後的趨勢。箭頭函數、Promise等等語法很好用。
• localStorage：保存用戶信息。
• Canvas：頁面頂部小雪花效果。
• Webpack：vue-cli自帶Webpack，可是須要本身改造一下，好比要對須要安裝sass相關loader，vue-cli已經配置好了webpack，你只須要安裝依賴就能夠，使用的時候只須要<style lang="scss"></style>。
• SASS(SCSS)：用SCSS作CSS預處理語言，有些地方很方便，我的很喜歡用。(詳看👉SASS用法指南)
• flex：flex彈性佈局，簡單適配手機、PC端。
• CSS3：CSS3過渡動畫及樣式。

總結

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

時間軌跡

• 4.13：基本功能完成，後續完成登陸後的操做。

• 4.14：完成登陸以及側邊欄。

• 4.15：增長收藏

• 4.16：加入回覆、單條回覆、點贊。項目完成。

About

源代碼地址：👉 GitHub

我的網站：👉 microzz.com

GitHub：👉 microzz

Build Setup

# install dependencies
npm 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複製代碼