vant-ui的按需引用

本文介绍了如何在Vue项目中按需引入和全局引入 vant-ui 框架。首先需要安装 vant-ui 和 babel-plugin-import 插件,并在 babel.config.js 中配置按需加载。接着在 plugin 文件夹的 vant.js 中编写引入代码,然后在 main.js 中引入 CSS 样式和 vant.js。最后尝试引入并使用 button 组件,确保项目能正常运行。此外,还提及了全局引入 vant-ui 的两种方法。
摘要由CSDN通过智能技术生成

首先安装vant-ui插件

  • 如果你想按需引入一定要安装按需加载的配置
#先安装vant-ui
cnpm install vant-ui --save	

# 再安装按需引入的插件
cnpm i babel-plugin-import -D

babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式

在babel.config.js中添加配置

plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]

在这里插入图片描述
创建一个plugin文件夹,在plugin文件夹中定义一个vant.js文件用来存放代码

在这里插入图片描述
之后在建好得js文件中首先导入vue,在导入需要的vant-ui插件,通过vue.use() 全局注入

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值