Vue引入vant方式(全局,按需,单页面引入)

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，可以看看
    }
}