一陈醒、項目準(zhǔn)備
1 抚岗、在index.html： 設(shè)置移動端viewport。
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
2鱼鼓、 在入口文件main.js： 添加reset.css文件拟烫。
3、移動端1像素邊框問題：在main.js中import添加 border.css(收藏備用)
4 迄本、移動端瀏覽器點擊延遲300ms才執(zhí)行的問題硕淑，為了避免可引入fastclick庫
npm install fastclick --save 或 npm install fastclick -S
--save 表示不管是在開發(fā)環(huán)境還是上線都需要用到。會自動添加到dependencies
5嘉赎、移動端iconFont： www.iconfont.cn--->圖標(biāo)管理--->我的項目--->新建項目
二置媳、首頁
- Header區(qū)域
- 安裝stylus、stylus-loader（書寫樣式）
npm install stylus --save
npm install stylus-loader --save
- 安裝stylus、stylus-loader（書寫樣式）
- 移動端布局一般選擇rem格式公条，不用px拇囊。
- rem是相對于html中px像素而言 (1rem = html font-size )
假設(shè)html中設(shè)置的font-size=50px,則一個字體是43px時就相當(dāng)于0.86rem
- rem是相對于html中px像素而言 (1rem = html font-size )
- iconfont的使用
- 代碼優(yōu)化：
- 例如一些經(jīng)常使用的顏色設(shè)置成一些變量，方便引用和維護(hù)（只需要修改變量就可以變換）靶橱，比如在assets-->styles文件夾里添加varibles.styl文件來存儲全局變量寂拆。
- 使用@import '...' 在stylus里引入文件，使用變量
- 在css中引用別的css文件要加 ~
@import '../../../assets/styles/varibles.styl'
@import '~@/assets/styles/varibles.styl'
@import '~styles/varibles.styl'--> styles是自定義路徑別名
'~@/assets/styles/varibles.styl' -->@表示src目錄抓韩，可在webpack.base.conf文件里配置纠永。也可以自己配置自定義別名。當(dāng)在webpack.base.conf文件里更改了配置后要重啟npm run dev谒拴， 否則后報錯尝江。
- 首頁輪播圖
- 安裝Vue-awesome-Swiper庫
- 輪播圖自動撐開對下面DOM造成抖動的問題解決方式
.swiper width: 100% height 0 overflow hidden padding-bottom 26.67% /*相對于width*/ - 在<style scoped></style>使用scoped的作用是為了防止樣式對其他文件產(chǎn)生影響，當(dāng)我們想修改一個class英上，而這個class是引用的別的文件的炭序，不在本文件內(nèi)可使用 >>>符號。例如：
.swiper >>> .swiper-pagination-bullet-active background: #fff;
- 封裝mixins.styl
- 字?jǐn)?shù)太多讓樣式顯示為省略號,引入文件直接調(diào)用
// mixins.styl 省略符號 ellipsis() overflow: hidden white-space: nowrap text-overflow: ellipsis@import '~styles/mixins.styl' .icon-desc position: absolute left: 0 right: 0 bottom: 0 height: 0.44rem line-height: 0.44rem text-align: center color: $darkTextColor ellipsis()
