使用vue.js構建一個知乎日報
Vue.js是我所喜愛的，知乎也是我喜愛的，突發奇想使用vue做了一個知乎日報
設計：
1.設計上沒有按照知乎日報客戶端的交互及UI設計來做，本渣親自捏了一個，顏色以黑白灰為主，本來想加入知乎的藍色，但是本渣設計功力實在太差，故舍棄掉了藍色，只采用黑白灰三色。
2.日報條目采用無邊界設計，只添加淡灰色的分割線來區分。
3.整個網頁是一個單頁應用(Single Page Web App)，所有的數據使用vuex來進行管理，在store里統一管理。
預覽：
涉及到的技術：
-
該項目使用 vue-cli 構建、打包，配合vue全家桶（ vue 、 vuex 、 vue-router ）進行編碼、開發
-
基礎樣式使用basscss，basscss對層疊樣式表的設計方式簡練、高效、可復用性強
-
網絡請求使用 axios
-
后臺使用Node.js
vuex架構 ：
-
將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' // 最新消息列表梗
命名具有意義，并且寫好注釋。
-
store分模塊
其實不用分模塊，但還是分一下吧，為后續開發著想。
-
使用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>
-
mutations與actions：
a、mutations是用來處理同步的事情的，比如給state中的變量賦值；
b、actions是用來處理異步的事情，比如網絡請求；
c、但是actions也是可以做同步的事情的，但最好按照vuex的建議來做：在mutations中處理同步操作
-
具體怎么處理的看我的github，記得點點贊啥的：
遇到的難題：
-
跨域。跨域是前端一個老生常談的問題，我使用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是數據
后記：
大家多多交流，互相學習啊，寫的不好的地方情指正哦！