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

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

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

　　廢話不多說，進入正題吧：

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

 

　　2、創建基於webpack模版的新項目：

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

 

　　3、打開項目，這里以vue-demot為例

　　 cd vue-demo 

 

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

　　 npm i lib-flexible --save 

 

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

　　 import 'lib-flexible/flexible' 

 

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

　　 npm install px2rem-loader 

 

　　7、配置px2rem-loader

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

 

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

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

 

　　9、安裝Vant組件庫

　　 npm i vant -S 

　　

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

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

 

　　11、在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%' }"
    />