1.安装vant
npm i vant -S(简写)
npm install vant --save(完整写法)
一.全局引入(方案一)
//main.js
import Vant from 'vant'
import 'vant/lib/vant-css/index.css'
Vue.use(Vant)
二. 按需引入(方案二)
①安装 babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。
npm i babel-plugin-import -D
②. babel.config.js修改配置
//点开如上文件,写入此内容
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
}
③.创建vant.js
//以这种方式引入自己需要的组件
import Vue from 'vue'
import {
Button,
RadioGroup,
Radio
} from 'vant'
Vue.use(Button).use(RadioGroup).use(Radio)
④.在mian.js里引入,全局即可使用
如果想在页面中单独使用组件
import '../util/vant'
import { Button, Row, Col } from 'vant'
export default{
components: {
[Button.name]:Button // 有的组件有专门的引入方式，比如Dialog，可以看看
}
}
