vue中使用Vant
Vant官网
环境:vue/cli 4.5.11
1、安装
在package.json中查看Vue的版本,下载对应的版本
Vue2的项目:npm i vant -S
Vue3的项目:npm i vant@next -S
2、使用
2.1、首先在main.js中导入css和vantimport 'vant/lib/index.css'
2.2、引入组件
法一:自动按需引入组件(推荐)
1.安装插件npm i babel-plugin-import -D
2.配置babel.config.js(webpack1在babelrc添加配置,无需设置libraryDirectory)
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};
3.在的vue组件中使用vant的组件,注意组件注册的方式
<van-button type="primary">主要按钮</van-button>
import { Button } from 'vant'
components: {
[Button.name]: Button
}
法二:手动按需引入组件
1.在在main.js中导入
import { Button } from 'vant'
Vue.use(Button)
2、在vue组件中使用不需要再次导入组件,直接用
<van-button type="primary">主要按钮</van-button>
法三:导入所有组件
1.在main.js中导入
import Vant from 'vant';
Vue.use(Vant);
2.在vue组件中使用不需要再次导入组件,直接用
<van-button type="primary">主要按钮</van-button>
注意:如已经用法一在babel.config.js
中设置了自动按需引入,则不能在main.js
中如法三再次导入所有组件,否则会报错Uncaught ReferenceError: Vant is not defined
Shiryan
人生就是体验,喜欢就坚持。
Shiryan
人生就是体验,喜欢就坚持。
宣传栏
目录
Vant官网
环境:vue/cli 4.5.11
1、安装
在package.json中查看Vue的版本,下载对应的版本
Vue2的项目:npm i vant -S
Vue3的项目:npm i vant@next -S
2、使用
2.1、首先在main.js中导入css和vantimport 'vant/lib/index.css'
2.2、引入组件
法一:自动按需引入组件(推荐)
1.安装插件npm i babel-plugin-import -D
2.配置babel.config.js(webpack1在babelrc添加配置,无需设置libraryDirectory)
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};
3.在的vue组件中使用vant的组件,注意组件注册的方式
<van-button type="primary">主要按钮</van-button>
import { Button } from 'vant'
components: {
[Button.name]: Button
}
法二:手动按需引入组件
1.在在main.js中导入
import { Button } from 'vant'
Vue.use(Button)
2、在vue组件中使用不需要再次导入组件,直接用
<van-button type="primary">主要按钮</van-button>
法三:导入所有组件
1.在main.js中导入
import Vant from 'vant';
Vue.use(Vant);
2.在vue组件中使用不需要再次导入组件,直接用
<van-button type="primary">主要按钮</van-button>
注意:如已经用法一在babel.config.js
中设置了自动按需引入,则不能在main.js
中如法三再次导入所有组件,否则会报错Uncaught ReferenceError: Vant is not defined