Vue.js是我所喜愛(ài)的庆尘，知乎也是我喜愛(ài)的，突發(fā)奇想使用vue做了一個(gè)知乎日?qǐng)?bào)
項(xiàng)目地址：
設(shè)計(jì)：
1.設(shè)計(jì)上沒(méi)有按照知乎日?qǐng)?bào)客戶端的交互及UI設(shè)計(jì)來(lái)做司忱，本渣親自捏了一個(gè)涮毫，顏色以黑白灰為主蜓肆，本來(lái)想加入知乎的藍(lán)色，但是本渣設(shè)計(jì)功力實(shí)在太差舀奶，故舍棄掉了藍(lán)色暑竟，只采用黑白灰三色。
2.日?qǐng)?bào)條目采用無(wú)邊界設(shè)計(jì)伪节，只添加淡灰色的分割線來(lái)區(qū)分光羞。
3.整個(gè)網(wǎng)頁(yè)是一個(gè)單頁(yè)應(yīng)用(Single Page Web App)，所有的數(shù)據(jù)使用vuex來(lái)進(jìn)行管理怀大，在store里統(tǒng)一管理纱兑。
預(yù)覽：
涉及到的技術(shù)：
該項(xiàng)目使用vue-cli構(gòu)建、打包化借，配合vue全家桶（vue潜慎、vuex、vue-router）進(jìn)行編碼蓖康、開(kāi)發(fā)
基礎(chǔ)樣式使用basscss铐炫，basscss對(duì)層疊樣式表的設(shè)計(jì)方式簡(jiǎn)練、高效蒜焊、可復(fù)用性強(qiáng)
網(wǎng)絡(luò)請(qǐng)求使用axios
后臺(tái)使用Node.js
vuex架構(gòu)：
- 將getters倒信、mutations、actions變量名設(shè)定一個(gè)命名空間泳梆，否則store寫(xiě)的大了鳖悠，命名肯定會(huì)亂，示例：
// 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' // 最新消息列表梗
命名具有意義优妙，并且寫(xiě)好注釋乘综。
store分模塊
其實(shí)不用分模塊，但還是分一下吧套硼，為后續(xù)開(kāi)發(fā)著想卡辰。使用getters將狀態(tài)（state）、數(shù)據(jù)（data）發(fā)往頁(yè)面模版（template）上邪意，發(fā)數(shù)據(jù)有兩三種方式九妈，根據(jù)自己習(xí)慣來(lái)吧，我是這樣做的：
[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來(lái)循環(huán)渲染數(shù)據(jù)=== -->
</div>
mutations與actions：
a雾鬼、mutations是用來(lái)處理同步的事情的萌朱，比如給state中的變量賦值；
b呆贿、actions是用來(lái)處理異步的事情嚷兔，比如網(wǎng)絡(luò)請(qǐng)求；
c做入、但是actions也是可以做同步的事情的冒晰，但最好按照vuex的建議來(lái)做：在mutations中處理同步操作
具體怎么處理的看我的github，記得點(diǎn)點(diǎn)贊啥的：
vuex地址
store地址
遇到的難題：
- 跨域竟块『耍跨域是前端一個(gè)老生常談的問(wèn)題，我使用node做了一下中轉(zhuǎn)浪秘，示例代碼如下：
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.日?qǐng)?bào)詳情的渲染蒋情。日?qǐng)?bào)詳細(xì)內(nèi)容知乎是一個(gè)html格式的字符串，而數(shù)據(jù)的請(qǐng)求及渲染是異步的耸携，正常情況下來(lái)說(shuō)棵癣，瀏覽器是無(wú)法解析成功的，但是vue提供的一個(gè)v-html方法夺衍，可以搞定狈谊，示例代碼如下：
<div v-html="DONE_NEWS_DETAIL.body"></div>
其中DONE_NEWS_DETAIL是數(shù)據(jù)
后記：
大家多多交流，互相學(xué)習(xí)啊沟沙，寫(xiě)的不好的地方情指正哦河劝！
