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的作用域