1. 安装vant-ui
npm 安装
npm i vant -S
yarn 安装
yarn add vant -S
2. 全局导入
在 main.js 文件下
import Vue from 'vue'
import vant from 'vant'
import 'vant/lib/index.css'
Vue.use(vant)
3. 按需导入
安装插件:babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式,安装按需引入的插件 命令
npm i babel-plugin-import -D
在 babel.config.js
中添加如下代码
const plugins = [
[
'import',
{
libraryName: 'vant',
libraryDirectory: 'es',
style: true
},
'vant'
]
]
module.exports = {
presets: [['@vue/cli-plugin-babel/preset', { useBuiltIns: 'usage', corejs: 3 }]],
plugins
}
创建 plugins
文件夹,在文件夹下创建 vant.js
import Vue from 'vue'
import {Button} from 'vant'
Vue.use(Button)
在 main.js
文件配置 vant
组件
import '@/plugins/vant'