526互联

Vite Components插件

发布时间 2023-12-23 16:11:45作者: Karle

作用

Components 引于 unplugin-vue-components，用于解决vue文件内无需手动引入组件，减少import的调用

基本配置

在vite配置文件中，作为插件使用

import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'

export default defineConfig((mode) => {
    return {
        plugins:[
            Components({
                dts:true, //生成component.d.ts文件，默认true
                dirs:'src/components', //需要被导入的组件
                extensions:['vue','tsx','jsx'], //配置需要将哪些后缀类型的文件进行自动按需引入
                resolvers: [VantResolver()],//解析的 UI 组件库
            })
        ]
    }
})

 dirs内可以使用自定义插件，返回一个组件数组

 

import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'

export default defineConfig((mode) => {
    return {
        plugins:[
            Components({
                dts:true, //生成component.d.ts文件，默认true
                dirs:loadComponents(value), //需要被导入的组件
                extensions:['vue','tsx','jsx'], //配置需要将哪些后缀类型的文件进行自动按需引入
                resolvers: [VantResolver()],//解析的 UI 组件库
            })
        ]
    }
})

根据项目具体的项目管理方式进行逻辑改写

在构建工具配置好后，页面内引入组件无需通过import即可使用