react版開發之後開發的vue版， 其實vue版跟react版結構基本上是沒多大變化的，只是語法上不同。
這是目前react版和vue版功能最齊全的第三方cnode版本了！
如果你是剛接觸react或vue這恰好是一個好機會
react版cnode點這裡
技術棧
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuex": "^3.0.1",
"iview": "^2.10.1",
"axios": "^0.17.1",
"moment": "^2.20.1",
"webpack": "^3.6.0",
"simplemde": "^1.11.2",
"highlight": "^9.12.0",
"scss": "",
"ES6": "",
"flex": "",
複製程式碼開發目錄
.
├── README.md
├── build
│ ├── build.js
│ ├── check-versions.js
│ ├── logo.png
│ ├── utils.js
│ ├── vue-loader.conf.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config
│ ├── dev.env.js
│ ├── index.js
│ └── prod.env.js
├── index.html
├── package-lock.json
├── package.json
├── src
│ ├── App.vue # 檢視入口
│ ├── api # API配置檔案
│ │ └── index.js
│ ├── assets # 處理靜態資原始檔目錄
│ │ ├── images
│ │ │ ├── app-qrcode.png
│ │ │ ├── github.svg
│ │ │ └── not-match.gif
│ │ └── scss
│ │ ├── _variable.scss
│ │ ├── media.scss
│ │ └── style.scss
│ ├── components
│ │ ├── footer
│ │ │ └── Footer.vue # 底部元件
│ │ ├── header
│ │ │ └── Header.vue # 頭部元件
│ │ ├── msg
│ │ │ └── Msg.vue # 未讀訊息和已讀訊息列表元件
│ │ ├── sidebar
│ │ │ └── Sidebar.vue # 側邊欄元件
│ │ └── topics-list
│ │ └── TopicsList.vue # 話題列表元件
│ ├── main.js # 程式入口檔案
│ ├── router
│ │ └── index.js # 路由配置
│ ├── store
│ │ └── index.js # 狀態管理
│ └── views
│ ├── 404
│ │ └── 404.vue # 404頁
│ ├── collections
│ │ └── Collections.vue # 收藏頁
│ ├── index
│ │ └── Index.vue # 主頁
│ ├── login
│ │ └── Login.vue # 登入頁
│ ├── messages
│ │ └── Messages.vue # 未讀訊息頁
│ ├── release
│ │ └── Release.vue # 釋出/編輯頁
│ ├── topic
│ │ └── Topic.vue # 檢視話題詳情頁
│ └── user
│ └── User.vue # 使用者詳情頁/個人主頁
└── static # 靜態資源目錄
└── images
├── 11.png
├── 22.png
├── 33.png
└── 44.png
複製程式碼API清單 x 15
- [√] 主題首頁
- [√] 主題詳情
- [√] 新建主題
- [√] 編輯主題
- [√] 收藏主題
- [√] 取消收藏主題
- [√] 使用者所收藏的主題
- [√] 新建評論
- [√] 為評論點贊
- [√] 使用者詳情/個人主頁
- [√] 登入
- [√] 獲取未讀訊息數
- [√] 獲取已讀和未讀訊息
- [√] 標記全部已讀
- [√] 標記單個訊息為已讀
啟動程式
# install dependencies
npm install
# serve with hot reload at localhost:3888
npm start
# build for production with minification
npm run build
複製程式碼結語
- CNode主題詳情是使用markdown寫的，樣式可以使用github-markdown-css。
- CNode提供的API獲取主題沒有返回總條數導致不能算出總頁數, 所以我寫死了250頁。
- 大部分功能都需要登入的，所以遊客只能進行瀏覽，如果感興趣的可以嘗試登入, 不會儲存你的accesstoken, 歡迎監督。
- 釋出話題和評論使用的markdown編輯器 simplemde
- 因為託管在github上，所以首次開啟的速度會稍微慢一點，之後基本上是秒開。
- 這應該是一個很好的學習機會，Vue轉react，react轉Vue都很好上手。
學到東西不要忘了給個star哦，謝謝!
...
???