vue的UI架構之有贊移動端vant-ui

最近公司不忙比較閑，于是研究了一下前端ui架構相關的一些東西

npm安裝

npm i vant -S

一般我們使用ui架構都是按需引入這裡我們隻讨論按需引入，按需引入我們需要安裝一個依賴包babel-plugin通過指令行安裝

npm i babel-plugin-import -D

配置

然後需要配置.babelrc檔案中的plugins這一項加入如下代碼（注意是加入而不是替換預設的代碼）      

"plugins": [
  ['import',
    {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    },
    'vant']
]    
      

使用

在main.js中引入import 'vant/lib/vant-css/index.css';這個總樣式檔案

        import { Button } from 'vant' 引入需要用到的樣式元件

        Vue.use(Button) 在vue執行個體中使用引入的樣式元件

在.vue檔案中按照官方的方法使用如下

<van-button type="default" size="large">大号按鈕</van-button><br>
<van-button type="primary" size="normal">普通按鈕</van-button><br>
<van-button type="warning" size="small">小型按鈕</van-button><br>
<van-button type="danger" size="mini">迷你按鈕</van-button><br>