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

microzz發表於2017-04-17
Vue.js

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

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

原始碼

原始碼地址：? github.com/microzz/vue…

歡迎大家star和fork?

預覽

線上預覽地址：? microzz.com/vue-cnode/

Vue.js打造一個開源的CNode社群
手機端VueCNode - microzz.com

Vue.js打造一個開源的CNode社群
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.js打造一個開源的CNode社群
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複製程式碼

相關文章