使用vue.js構建一個知乎日報

Vue.js是我所喜好的，知乎也是我喜好的，突發奇想使用vue作了一個知乎日報

項目地址：

Github地址
在線預覽demo

設計：

1.設計上沒有按照知乎日報客戶端的交互及UI設計來作，本渣親自捏了一個，顏色以黑白灰爲主，原本想加入知乎的藍色，可是本渣設計功力實在太差，故舍棄掉了藍色，只採用黑白灰三色。

2.日報條目採用無邊界設計，只添加淡灰色的分割線來區分。

3.整個網頁是一個單頁應用(Single Page Web App)，全部的數據使用vuex來進行管理，在store裏統一管理。

預覽：

涉及到的技術：

1. 該項目使用vue-cli構建、打包，配合vue全家桶（vue、vuex、vue-router）進行編碼、開發

2. 基礎樣式使用basscss，basscss對層疊樣式表的設計方式簡練、高效、可複用性強

3. 網絡請求使用axios

4. 後臺使用Node.js

vuex架構：

1. 將getters、mutations、actions變量名設定一個命名空間，不然store寫的大了，命名確定會亂，示例：

// actions types
export const FECTH_NEWS_LATEST = 'FECTH_NEWS_LATEST'                // 最新消息列表
// mutstions types
export const TOGGLE_NEWS_LATEST = 'TOGGLE_NEWS_LATEST'              // 最新消息列表
//  getters types
export const DONE_NEWS_LIST_ROOT = 'DONE_NEWS_LIST_ROOT'            // 最新消息列表梗

命名具備意義，而且寫好註釋。

1. store分模塊
   其實不用分模塊，但仍是分一下吧，爲後續開發着想。

2. 使用getters將狀態（state）、數據（data）發往頁面模版（template）上，發數據有兩三種方式，根據本身習慣來吧，我是這樣作的：

[types.DONE_NEWS_LIST_ROOT]: state => {
        return state.NewsListRoot
    }

computed: {
        ...mapGetters(['DONE_NEWS_LATEST', 'DONE_LOADING_ONE', 'DONE_LOADING_TWO', 'DONE_NEWS_LIST_ROOT'])
    }

<div v-for="list in DONE_NEWS_LIST_ROOT">
        <!-- ===使用v-for來循環渲染數據=== -->
</div>

1. mutations與actions：
   a、mutations是用來處理同步的事情的，好比給state中的變量賦值；

b、actions是用來處理異步的事情，好比網絡請求；
c、可是actions也是能夠作同步的事情的，但最好按照vuex的建議來作：在mutations中處理同步操做

1. 具體怎麼處理的看個人github，記得點點贊啥的：

vuex地址
store地址

遇到的難題：

1. 跨域。跨域是前端一個老生常談的問題，我使用node作了一下中轉，示例代碼以下：

router.get('/news/latest', function (req, res, next) {
    var options = {
        method: "GET",
        url: "http://news-at.zhihu.com/api/4/news/latest"
    };
    request(options, function (error, response, body) {
        if (error) throw new Error(error);
        res.json(JSON.parse(body))
    });
});

2.日報詳情的渲染。日報詳細內容知乎是一個html格式的字符串，而數據的請求及渲染是異步的，正常狀況下來講，瀏覽器是沒法解析成功的，可是vue提供的一個v-html方法，能夠搞定，示例代碼以下：

<div v-html="DONE_NEWS_DETAIL.body"></div>

其中DONE_NEWS_DETAIL是數據

後記：

你們多多交流，互相學習啊，寫的很差的地方情指正哦！