vantUI按需引入(vue3-vite)

最新推荐文章于 2024-02-22 09:34:41 发布

吃饭了吗

最新推荐文章于 2024-02-22 09:34:41 发布

阅读量384

点赞数

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_41824429/article/details/130479007

版权

文章介绍了在Vue项目中如何按需安装和使用VantUI库的步骤，包括通过npm安装，创建plugins目录，导入并注册所需组件，配置vite.config.ts以实现按需加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 安装插件

npm i vant

2. 需要按需导入的组件

创建plugins文件夹，在van.ts里引入需要的组件
在这里插入图片描述

// 按需全局引入组件
import {
    Button,
    Col,
    Row,
    Rate,
    ImagePreview,
    Lazyload,
} from 'vant'

import 'vant/es/button/style'
import 'vant/es/col/style'
import 'vant/es/row/style'
import 'vant/es/rate/style'
import 'vant/es/image-preview/style'
import 'vant/es/lazyload/style'
import type { App } from 'vue'

const components = [
    Button,
    Col,
    Row,
    Rate,
    ImagePreview,
    Lazyload,
]

export const VantResolve = {
    install(app: App) {
        components.forEach((component) => {
            app.use(component)
        })
    }
}

3. main.ts里全局引入需要的组件

main.ts

import { VantResolve } from './plugins/vant'

const app = createApp(App)
app.use(VantResolve)

4. 安装按需引入插件

npm i unplugin-vue-components -D

5. 配置vite.config.ts

import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

export default {
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
};