1. 完成資源整合+項目（目錄）結(jié)構(gòu)設(shè)計+mock數(shù)據(jù)引用
- 完成的svg文件要生成字體icon文件可以上icomoon.io
click app> choose your icon > download your iconfont(you can setting your preferences)簡單操作獲得icon 的font文件 - src 文件下common文件可以放置一些公共資源，好比fonts文件與style文件（有預(yù)處器按照需處理器來命名）
- mock 的本地數(shù)據(jù)引用，在bulid文件中dev-server里進(jìn)行設(shè)置，利用express設(shè)置接口文件，然后通過app.use(/api)，將api放在一起。然后在/api/設(shè)置的data 中可以看到相應(yīng)的json文件，google有個jsonview的插件可以幫忙json排版。
- npm run dev 后如果修改的是node的文件要重新run dev才行
- reset.css文件可以放置在static然后通過index進(jìn)行引入
- 依據(jù)設(shè)備設(shè)置meta 移動端配置（縮放等）
2. 骨架搭建
- 寫css樣式的時候，node-module中的postcss會幫忙解決一些兼容性問題。
- vue-router的使用
- 簡化路徑可以在base-config中的resolve，設(shè)置alias
- router.push 可以指定首頁登錄router-view的地址4
- 手機測試可以在cli.im網(wǎng)站上將域名轉(zhuǎn)化成二維碼形式進(jìn)行測試
notice
- 出現(xiàn)空白字符（span之間有空格時）可以設(shè)置font-size為0,子項記得設(shè)置fsz不然繼承父項的0了，會顯示空白
- 只能在針對JS庫設(shè)計路徑，對stylus等css不行
- 對背景圖ICON等于文字不對齊 可以使用vertical-align:top 使得兩者對齊
- 模糊背景可以添加一個div包裹img,div設(shè)置filter: blur(10px),再其父元素還可以設(shè)置一個透明背景background-color :rgba(x,x,x,0.5)效果更好一些
- 彈出浮層的設(shè)置可以是fixed以及z-index設(shè)置大于0
- v-show綁定一個變量，true顯示，false隱藏
-
sticky footer https://www.w3cplus.com/css3/css-secrets/sticky-footers.html
一般套路是： 設(shè)計一個容器(需要清除浮動)和相同級的footer
容器最小高度是屏幕高度也就是100% - 定義變量或常量對以后調(diào)整有幫助
- 去0.5的小數(shù)的辦法Math.floor(score*2)/2 無論score原本怎樣，若有小數(shù)只能是0.5的v-
- 父組件能通過v-bind傳送props設(shè)置的數(shù)據(jù)
- 兩邊自適應(yīng)，中間居中布局（fiex布局,在VUE中使用了postCss工具可以使其兼容多種瀏覽器參考** caniuse.com**）
- 背景模糊的IOS（backdrop: blur(10px)）
- 垂直居中（display:table的應(yīng)用）
- img標(biāo)簽有寬高直接寫在標(biāo)簽中比較好，不用寫計量單位
- better-scroll 使用的方法是綁定DOM，依據(jù)DOM結(jié)構(gòu)渲染高度，所以數(shù)據(jù)要先傳入在進(jìn)行高度計算，可以使用Vue.$nextTick解決
- 實現(xiàn)兩滾動欄高度綁定，可以將一欄的分區(qū)高度值計算后保存到數(shù)組，在調(diào)用數(shù)據(jù)數(shù)值，這樣就不用反復(fù)計算高度值了。
- 如果只是為了讓JS獲取樣式而無實際效果，可以選擇統(tǒng)一的Class名后綴好比-hook
利用Vue的computed屬性可以更好的處理 - router-view也是可以傳遞數(shù)據(jù)給組件的 利用 :名稱=“數(shù)據(jù)JSON” 就是利用了v-bind
- 引入Vue，使用Vue.set(對象，屬性名，屬性值)
- 給有動畫屬性的標(biāo)簽添加 transform：translate3D(0,0,0)可以使得動畫更流暢
- 在容器中給圖片設(shè)置100%寬度，高度與寬度相同：可以設(shè)置height:0然后padding-bottom: 100%,W3C標(biāo)準(zhǔn)中padding百分比值是按照寬度進(jìn)行計算的
- 簡單的組件數(shù)據(jù)傳遞可以使用$on,$refs,$emit:復(fù)雜的用Vuex
- better-scroll使用的時候是依據(jù)DOM來渲染，所以DOM發(fā)生變化的時候就要刷新scroll,可以使用其refresh()的方法，配合$nextTick()來使用，可以等到DOM變化完成在進(jìn)行完善的渲染滾動
24.給原來有的Obj添加新的屬性可以使用Object.assign()，在Vue中要想使其新的屬性得到相應(yīng)，應(yīng)創(chuàng)建一個新的對象，讓它包含原對象的屬性和新的屬性
https://cn.vuejs.org/v2/guide/reactivity.html#%E5%8F%98%E5%8C%96%E6%A3%80%E6%B5%8B%E9%97%AE%E9%A2%98
25.<keep-alive> 包裹動態(tài)組件時，會緩存不活動的組件實例，而不是銷毀它們,這樣就能實現(xiàn)在瀏覽別的組件的時候切回數(shù)據(jù)還是不變。保持狀態(tài)
3. 項目編譯
了解webpack配置
npm run build
- 有時候編譯錯誤會告訴錯誤文件，而真正錯的可能是這個文件所引入的某個文件，可以分開測試
- 其中一次錯誤是顯示Module build failed: ModuleBuildError: Module build failed: Error: Unexpected "space" found.
然而index.styl文件沒問題，而是引入的base文件中 &: after (a與:之間有空格)導(dǎo)致錯誤
