解决vite插件 unplugin-vue-components 自动导入组件时 view-ui-plus 无解析器问题

解决vite插件 unplugin-vue-components 自动导入组件时 view-ui-plus 无解析器问题

问题描述

• 在使用自动导入插件时 unplugin-vue-components 内置了很多知名组件库的Resolver，包括ViewUiResolver但是没有ViewUiPlusResolver，因此导致不能使用自动导入组件。

解决方法

• 自定义Resolver

▼
js
复制代码
// view-ui-plus-resolver.js
function ViewUiPlusResolver() {
    return {
        type: 'component',
        resolve: (name) => {
            if (name.match(/^I[A-Z]/)) {
                const importName = name.slice(1);
                return {
                    name: importName,
                    from: 'view-ui-plus',
                };
            }
            return null;
        }
    };
}

export default ViewUiPlusResolver

• 在vite.config.js中引入并配置

▼
js
复制代码
import {resolve} from "path";
import {defineConfig, loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite';
import {ElementPlusResolver} from "unplugin-vue-components/resolvers";
import ViewUiPlusResolver from "./view-ui-plus-resolver.js";
// https://vite.dev/config/

const root = process.cwd();
const pathSrc = resolve('./', "src");

export default defineConfig(({command, mode}) => {
    let env = loadEnv(mode, root);
    return {
        base: env.VITE_APP_PREFIX,
        resolve: {
            alias: {
                "@": pathSrc,
            },
        },
        plugins: [
            vue(),
            Components({
                dts: `${env.VITE_TYPE_DIR}/components.d.ts`,
                dirs: ['src'],
                extensions: ['vue', 'jsx', 'tsx'],
                resolvers: [ElementPlusResolver(), ViewUiPlusResolver()],
            }),
        ],
        server: {
            host: "0.0.0.0",
            port: 3011,
            open: false,
            // 本地跨域代理，开发阶段生效
            proxy
        },
    }
})

注意事项

• 在以后使用view-ui-plus组件时需要加上I作为前缀

• 示例

▼
vue3
复制代码
<script setup>

const sendd = () => {
  axios.get('/api/users').then(res =>{
    console.log(res);
    tableData.value = res.data.data
  })
}
const columns = ref([
  {
    title: '账号',
    key: 'uid'
  },
  {
    title: '名字',
    key: 'nickName'
  },
  {
    title: '邮箱',
    key: 'email'
  },
  {
    title: '城市',
    key: 'county',
    tooltip: true
  },
  {
    title: '用户类型',
    key: 'userType'
  },
  {
    title: '操作',
    slot: 'action'
  }
]);
const tableData = ref();
onMounted(()=>{
  sendd()
})
</script>

<template>
<div>
  <div></div>
  <div>
    <ITable border :columns="columns" :data="tableData">
      <template #action>
        <ElButton type="danger" link>删除</ElButton>
      </template>
    </ITable>
  </div>
</div>
</template>

<style scoped>

</style>

• 在上述在，Table组件需要加上I，变成ITable才能生效