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是数据

跋文：

人人多多交换，互相学习啊，写的不好的处所情斧正哦！