用 Vue 全家桶二次開發 V2EX 社區

1、開發背景

• 爲了全面的熟悉Vue+Vue-router+Vuex+axios技術棧，結合V2EX的開放API開發了這個簡潔版的V2EX。 在線預覽

• API來自官方以及djyde的整理。

• 在線訪問請節制使用，跨域是經過Nginx配置反向代理實現的，因此每小時120次API請求是算在服務器頭上的（沒啥說的了）。

• 當頁面刷新後也沒法顯示，請查看控制檯的異步請求是否返回403。若是是的話，要麼你等等（好久），要麼你clone這個庫到本地去玩。

• 項目地址：v2ex-vue

2、項目演示

分類頁

文章頁 & 用戶頁

懶加載

移動端

路由

首頁默認顯示最新的帖子

• 首頁 /

• 所有 /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主文件

3、項目優點

• 界面設計簡潔

• 沉浸式的閱讀體驗

• 能夠按分類/文章/用戶瀏覽

• 在文章頁顯示用戶評論

• 圖片使用懶加載模式

• 總之，實現了你看帖所須要的一切

• 項目基於Vue全家桶

• 適配移動端

• 有完善的文檔註釋

• 有疑問歡迎提交issue

• 感興趣的歡迎給顆star ^_^

• ...

4、項目缺陷

• 不支持翻頁（沒有找到翻頁的API）

• ...

5、項目安裝

項目兼容IE9+，使用項目前，請確保安裝好了NodeJS。

git clone https://github.com/bergwhite/v2ex-vue.git  // 克隆項目
cd v2ex-vue  // 進入項目目錄
npm install  // 安裝依賴
npm run dev  // 運行項目

6、解決方案

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：正在找工做，北京有坑的歡迎聯繫