界面設計簡潔，沉浸式的閱讀體驗，可以按分類/文章/用戶瀏覽，在文章頁顯示用戶評論，圖片使用懶載入模式，總之，實現了你看帖所需要的一切。項目基於Vue全家桶，適配移動端，有完善的文檔註釋。 ...
一、開發背景
- 為了全面的熟悉Vue+Vue-router+Vuex+axios技術棧，結合V2EX的開放API開發了這個簡潔版的V2EX。 線上預覽
- API來自官方以及djyde的整理。
- 線上訪問請節制使用，跨域是通過Nginx配置反向代理實現的，所以每小時120次API請求是算在伺服器頭上的（沒啥說的了）。
- 當頁面刷新後也無法顯示，請查看控制台的非同步請求是否返回403。如果是的話，要麼你等等（很久），要麼你clone這個庫到本地去玩。
- 項目地址：v2ex-vue
二、項目演示
分類頁
文章頁 & 用戶頁
懶載入
路由
首頁預設顯示最新的帖子
- 首頁 /
- 全部 /topic
- 分類 /topic/:name
- 文章 /article/:id
- 用戶 /user/:name
結構
目錄是cmd生成的（稍微進行了一下修改，預設的太難看了） tree /f >tree.txt
├─components
│ Topic.vue // 某一分類下的文章或某個用戶的全部文章
│ TopicList.vue // 全部分類
├─router
│ index.js // 路由
├─store
│ state.js // 存放API地址和最近一次請求的文章和評論
│ getters.js // 讀取state的值
│ mutations.js // 存儲懶載入
│ actions.js // 存儲非同步請求
│ index.js // Vuex
├─ App.vue // 主頁面
├─ main.js // Vue主文件
三、項目優勢
- 界面設計簡潔
- 沉浸式的閱讀體驗
- 可以按分類/文章/用戶瀏覽
- 在文章頁顯示用戶評論
- 圖片使用懶載入模式
- 總之，實現了你看帖所需要的一切
- 項目基於Vue全家桶
- 適配移動端
- 有完善的文檔註釋
- 有疑問歡迎提交issue
- 感興趣的歡迎給顆star ^_^
- ...
四、項目缺陷
- 不支持翻頁（沒有找到翻頁的API）
- ...
五、項目安裝
項目相容IE9+，使用項目前，請確保全裝好了NodeJS。
git clone https://github.com/bergwhite/v2ex-vue.git // 克隆項目
cd v2ex-vue // 進入項目目錄
npm install // 安裝依賴
npm run dev // 運行項目
六、解決方案
6.1 本地開發跨域方案
本地開發中，通過配置代理表實現跨域。
config/index.js
-------------------
proxyTable: {
'/api': {
target: 'https://www.v2ex.com',
changeOrigin: true,
pathRewrite: {
'^/api': '/api'
}
}
}
6.2 讓Vuex支持IE
直接引入Vuex無法在IE中顯示，需要引入babel-polyfill。
npm install babel-polyfill --save-dev // 安裝babel-polyfill
src/main.js
---------------
import 'babel-polyfill' // 在vue主文件中導入
6.3 線上部署跨域方案
通過配置Nginx反向代理實現跨域。由於是代理HTTPS，所以你需要生成SSL證書。
/etc/nginx/nginx.conf
------------------------------
http {
server {
listen 80;
listen 443;
server_name www.v2ex.com;
ssl on;
ssl_certificate /etc/nginx/ssl/nginx.crt;
ssl_certificate_key /etc/nginx/ssl/nginx.key;
location / {
root /usr/share/nginx/html;
index index.html;
}
location /api/ {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass https://www.v2ex.com/api/;
}
}
}
PS：正在找工作，北京有坑的歡迎聯繫
