Vant在vue项目中的使用(全局引入、按需引入,)
vue项目vant组件的引入
·
通过npm安装
注:(vue2的项目下载vant2的,vue3下载vant3的)
# Vue 2 项目,安装 Vant 2:
npm i vant@latest-v2 -S
# Vue 3 项目,安装 Vant 3:
npm i vant -S
引入组件
方式一、按需引入组件
下载插件babel-plugin-import,在在编译过程中会将import写法转换为按需引入
##安装插件babel-plugin-import
npm i babel-plugin-import -D
# 在.babelrc 中添加配置
注意:webpack 1 无需设置 libraryDirectory
{
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
}
// 对于使用 babel7 的用户,可以在 babel.config.js 中配置
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};
#在main.js中
import {Button} from 'vant'
Vue.use(Button)
// 引入的多的话
import { Button, Row, Col } from 'vant'
Vue.use(Button).use(Row).use(Col)
方式二、手动按需引入组件也就是局部注册
在当前vue页面单独使用引入
import { Button } from 'vant';
export default {
components: {
[Button.name]: Button,
},
};
方式三、全局注册(配置按需引入后将不允许导入所有组件)
// main.js进行全局引入
import Vant from 'vant'
import 'vant/lib/index.css';
Vue.use(Vant)
更多推荐
已为社区贡献2条内容
所有评论(0)