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寫的大了，命名肯定會亂，示例：
|
1 2 3 4 5 6 |
// 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）上，發資料有兩三種方式，根據自己習慣來吧，我是這樣做的：
|
1 2 3 |
[types.DONE_NEWS_LIST_ROOT]: state => { return state.NewsListRoot } |
|
1 2 3 |
computed: { ...mapGetters(['DONE_NEWS_LATEST', 'DONE_LOADING_ONE', 'DONE_LOADING_TWO', 'DONE_NEWS_LIST_ROOT']) } |
|
1 2 3 |
<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做了一下中轉，示例程式碼如下：
|
1 2 3 4 5 6 7 8 9 10 |
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方法，可以搞定，示例程式碼如下：
|
1 |
<div v-html="DONE_NEWS_DETAIL.body"></div> |
其中DONE_NEWS_DETAIL是資料
後記：
大家多多交流，互相學習啊，寫的不好的地方情指正哦！