vant-ui的按需引用

首先安装vant-ui插件如果你想按需引入一定要安装按需加载的配置#先安装vant-uicnpm install vant-ui --save # 再安装按需引入的插件cnpm i babel-plugin-import -Dbabel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式在babel.config.js中添加配置plugins: [ ['import', { libraryNa
摘要由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() 全局注入

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vant-UI是一款基于Vue.js的移动端组件库,其中包含了消息通知组件。在Vant-UI中,可以使用`<van-notify>`组件和`<van-toast>`组件实现消息通知的功能。 在代码中,你可以通过点击按钮来触发`opennotify()`函数,函数中使用`this.$notify`方法来弹出消息通知。你可以在`message`属性中设置提示的内容,`background`属性控制提示框的背景色,`duration`属性设置提示框显示的时间。 另外,在.wxml文件中,你可以通过引入`<van-toast>`组件来实现动态更新提示的功能。通过点击按钮触发`dynamicPromptInformation`函数,即可实现动态更新提示的效果。 如果你想在小程序中使用Vant-UI的消息通知组件,你要在app.json文件中添加vant ui toast的依赖,即在"usingComponents"字段中添加`"van-toast": "@vant/weapp/toast/index"`。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Vue项目中Vant-UI库的使用(组件使用详情)](https://blog.csdn.net/m0_56079094/article/details/122045691)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [微信小程序 使用vant -ui 动态轻提示](https://blog.csdn.net/yangshengwei230612/article/details/130764796)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值