vant在vue2中按需
使用cli3创建一个vue项目,可以使用命令行、或者vue ui可视化界面创建,这里就不再阐述了。下面记录一下vant在vue项目中的按需引入:1、npm安装vant(网络有问题的可以使用 cnpm):npm i vant -S2、按需引入,还需要安装babel-plugin-import插件:npm i babel-plugin-import -D3、配置babel-plugin-i...
·
使用cli3创建一个vue项目,可以使用命令行、或者vue ui可视化界面创建,这里就不再阐述了。
下面记录一下vant在vue项目中的按需引入:
1、npm安装vant(网络有问题的可以使用 cnpm):
npm i vant@latest-v2 -S
2、按需引入,还需要安装babel-plugin-import插件:
npm i babel-plugin-import -D
3、配置babel-plugin-import插件,这里需要说明一下,以前的学习都是通过cli2.x创建项目,升级3.x后,发现生成的项目中没有.babelrc文件。不过没事,修改babel.config.js文件即可。
初始内容如下:
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
改为:
module.exports = {
presets: [
'@vue/app'
],
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
}
4、在main.js中按需引入所需的组件
import { Button } from 'vant'
Vue.use(Button)
5、在template中使用组件即可
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
更多推荐
已为社区贡献6条内容
所有评论(0)