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>