vue+mintUI搭建移動端新聞類網站

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