vue脚手架使用vant

由于公司最近开发移动端项目,我就学习了下vant来自有赞的 组件库 我就把自己的学习经验分享下

1.首先你要是使用vant脚手架就得先安装

npm i vant -D/-S    -D 是开发环境下使用  -S  是生产环境下需要  我们的vant是包括上线之后还是要使用所以 是 -S

我们再使用的时候也是有俩种方式

一.全部引入

在安装完之后  

 import Vant from 'vant'

 import 'vant/lib/index.css'

 Vue.use(Vant)

这样的话 我们就可以再每个组件中使用了, 就可以再页面上看到效果了

<van-icon name="search" slot="left" size="30"></van-icon>

<van-icon name="cart" slot="right" size="30"></van-icon>

我只是拿了俩个 例子 其他的组件 建议参考官网

二,按需引入 (推荐使用,毕竟我们全部引入的时候,并不是所有的都需要,所以压缩完代码之后增加我们的代码量,加载的时候需要更多的时间)

按需引入

2.1.先装一个babel的插件包

npm i babel-plugin-import -D

2.2.在脚手架项目下的 babel.config.js文件中加入下面的代码

plugins: [

    [

      'import',

      {

        libraryName: 'vant',

        libraryDirectory: 'es',

        style: true

      },

      'vant'

    ]

  ]

2.3，引入vant组件  在main.js文件中

import { Button, Icon } from 'vant'

Vue.use(Button).use(Icon)   // 可以链式操作  然后就可以在各个组件中使用了 使用和全部引入的方式一样