1.
自己建一个头条项目
my-vue-toutiao
vue init webpack my-vue-toutiao
cnpm install
安装vue-router
2.
安装Mint UI
cnpm install mint-ui 这是移动端ui库，element是桌面端
3.
全局使用
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)
4.
静态资源文件加载
放到static文件夹下，同时mint提供一个lazy load，为图片提供加载出来之前的表现
静态图片较多的情况下可单列json文件，管理图片
5.
类似的导航条，可选择swiper插件，vue项目下vue-awesome-swiper,实现效果较好
遇到的问题：
（1）没有引入css文件，代码始终是竖着排的
（2）这种样式使用swiper下的carousel模式，配置option中的slidesPerView:6,即能同时显示的slide的数量
6.
vh 将视窗分为100vh 移动端可支持
7.
数据管理，我选择的方式，新建一个data文件夹
（1）配置默认数据 default.js
（2）常用方法，如cookie，sessionStorage，localStorage的存取等，写入storage.js
（3）首页的数据存取方法写入index.js
vuex可用于vue项目的数据传递，能简化整个组件传值
遇到的问题：es6的 （）=>{},this.attr不能取到值，原因是this的作用域