?vue寫的功能最齊全的cnode社群網站

印度大使發表於2018-03-17
Vue網站

react版開發之後開發的vue版， 其實vue版跟react版結構基本上是沒多大變化的，只是語法上不同。

這是目前react版和vue版功能最齊全的第三方cnode版本了！

如果你是剛接觸react或vue這恰好是一個好機會

react版cnode點這裡

原始碼github

線上預覽

?vue寫的功能最齊全的cnode社群網站

?vue寫的功能最齊全的cnode社群網站

?vue寫的功能最齊全的cnode社群網站

?vue寫的功能最齊全的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哦，謝謝!

...

???

License

MIT

相關文章