vue腳手架中使用Vant，實現自動按需引入組件，並將px轉換爲rem

　　偶然間看到一款不錯的移動端vue組件庫Vant，照着官方文檔敲了一下，感受仍是不錯的。想着之後的項目中可能會運用到，特此記錄下，方便以後使用。

　　如今不少的組件庫爲了減少代碼包體積，都支持按需加載了。Vant做爲一款優秀的移動端vue組件庫，天然也是支持的。因爲當下手機設備屏幕尺寸不一，作移動端的Web頁面，須要考慮安卓/IOS的各類尺寸設備上的兼容，針對移動端設備的頁面，設計與前端實現怎樣作才能更好地適配不一樣屏幕寬度的移動設備？於是，在不一樣尺寸的手機設備上，頁面「相對性的達到合理的展現（自適應）」或者「保持統一效果的等比縮放是頗有必要的。

　　廢話很少說，進入正題吧：

　　一、假設你已經全局安裝了vue腳手架（npm install -g vue-cli）

 

　　二、建立基於webpack模版的新項目：

　　 vue init webpack vue-demo（其中，vue-demo爲項目名） 

 

　　三、打開項目，這裏以vue-demot爲例

　　 cd vue-demo 

 

　　四、安裝lib-flexible（它的做用是檢測頁面是否已有meta[name="viewport"]，若是有，將根據已有的meta標籤來設置縮放比例，不然會自動在html的head中添加一個meta name="viewport"的標籤，同時會自動設置html的font-size爲屏幕寬度除以10，也就是1rem等於html根節點的font-size）。

　　 npm i lib-flexible --save 

 

　　五、在main.js中引入lib-flexible

　　 import 'lib-flexible/flexible' 

 

　　六、安裝px2rem-loader（用於將px轉換爲rem的工具）

　　 npm install px2rem-loader 

 

　　七、配置px2rem-loader

// 在build文件中找到util.js，將px2rem-loader添加到cssLoaders中，如:
const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 37.5 // 這裏設置html根字體，一般設置爲設計稿寬度的 1/10。vant-UI的官方根字體大小是37.5
    }
  }

 

　　八、同時，在generateLoaders方法中添加px2remLoader

function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
    。。。。
}

 

　　九、安裝Vant組件庫

　　 npm i vant -S 

　　

　　十、安裝按需引入插件babel-plugin-import

　　 # 安裝插件 npm i babel-plugin-import -D 

 

　　十一、在babelrc中配置：　

"plugins": [
    "transform-vue-jsx", 
    "transform-runtime",
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true }]
  ],

　　

　　接下來就能夠npm run dev重啓項目愉快地玩耍了。

　　在main.js中按需加載你須要的組件：　

import {   
    popup,   
    Button
} from 'vant';

　　使用組件：

Vue.use(popup)  
    .use(Button);

　　頁面中就能夠這樣使用了。

　　<van-button type="primary" @click="showPopup">
      展現彈出層
    </van-button>

    <van-popup
      v-model="show"
      round
      position="bottom"
      :style="{ height: '20%' }"
    />