vue3.x 中使用 vant ＜van

您所在的位置：网站首页 › 为什么图片预览不出来 › vue3.x 中使用 vant ＜van

vue3.x 中使用 vant ＜van

2023-11-08 13:29| 来源: 网络整理| 查看: 265

背景今年发布了Vue3版本，新特性还挺多，有一项是按需引入组件，减小包体积的同时增加灵活度，很赞！但也引发了UI库跟不上版本的问题，比如 Element UI库，是基于vue2.x 的，目前还不支持vue3,是不是很头疼？不怕，有赞UI库 vant 已经支持 vue3了！

相信有挺多小伙伴会遇到以下问题： 1、安装了vant，该怎么按需引入？ 2、在哪个页面组件引入，怎么全局引入？ 3、不加载图片显示空白，本地图片路径不加载等

解决方案： 1、安装了vant，该怎么按需引入？

一般我们会在 main.js 全局引入vant，然后就可以在任何页面使用 vant

import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import { Divider, Popup, Overlay, Loading } from 'vant' // vant 需要什么就引入什么 import 'vant/lib/index.css' // vant 全局引入样式 const app = createApp(App) // 创建实例 app.use(Divider).use(Popup).use(Overlay).use(Loading) // vant 挂载 app.use(router) app.use(store) app.mount('#app')

2、在哪个页面组件引入，怎么全局引入？上面已经讲了怎么全局引入vant, 现在讲在某个页面引入vant

import { reactive, onMounted, toRefs } from 'vue' import { Toast } from 'vant' // 按需引入 export default { name: 'Home', components: { }, setup() { const state = reactive({ categoryList: [ { name: '超市', categoryId: 1001 }, { name: '服饰', categoryId: 1003 }, { name: '全球', categoryId: 1002 }, { name: '全部', categoryId: 1010 } ] }) onMounted(() => { console.log("加载完成"); }) const tips = () => { Toast('敬请期待'); } return { ...toRefs(state), tips } }, }

3、不加载图片显示空白，本地图片路径不加载等在用的时候，刚开始不熟悉的会遇到图片空白问题，下面讲讲该怎么用。首先要引入才能使用，先说某个页面引入：

import { Image as VanImage } from 'vant' components: { [VanImage.name]: VanImage }, // 注意 [VanImage.name]: VanImage，不要去改 // 然后就可以正常使用 ``

然后说说全局引入： main.js：

import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import 'vant/lib/index.css'; // 全局引入样式 import { Image as VanImage } from 'vant'; const app = createApp(App) // 创建实例 app.use(router) app.use(store) app.use(VanImage); app.mount('#app')

// 然后就可以在任何一个页面正常使用

注意点本地图片不加载解决方法：

v-bind:src=“require(’…/assets/logo.png’)” 简写为：:src=“require(’…/assets/logo.png’)”

更详细的使用说明可以查看官方文档：

https://vant-contrib.gitee.io/vant/next/#/zh-CN/image?anchor=dai-ma-yan-shi

如果您有更好的想法和建议，欢迎留言讨论噢！

【本文地址】

vue3.x 中使用 vant ＜van

vue3.x 中使用 vant ＜van

今日新闻

推荐新闻