使用unplugin-vue-components/vite 引入element-plus 组件未被识别

[jackqiu0123]

@form-create/[email protected] @[email protected]

https://github.com/antfu/unplugin-vue-components

使用unplugin-vue-components/vite, ElementPlusResolver 按需引入组件，但是组件未被识别

vite.config.ts

import { UserConfigExport, ConfigEnv } from 'vite';
import Vue from '@vitejs/plugin-vue';
import legacy from '@vitejs/plugin-legacy';
import eslintPlugin from 'vite-plugin-eslint';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

export default ({ command }: ConfigEnv): UserConfigExport => {
    return {
        plugins: [
            Vue(),
            eslintPlugin({
                cache: false,
                include: ['src/**/*.vue', 'src/**/*.js', 'src/**/*.ts'],
            }),
            legacy({
                targets: ['defaults', 'not IE 11'],
            }),
            AutoImport({
                imports: ['vue', 'vue-router', 'vuex', '@vueuse/core'],
                resolvers: [ElementPlusResolver()],
                eslintrc: {
                    enabled: true,
                },
            }),
            Components({
                resolvers: [ElementPlusResolver()],
            }),
        ],
    };
};

main.ts

import formCreate from '@form-create/ant-design-vue'
app.use(formCreate)

app.vue

<script lang="ts">
    export default defineComponent({
        setup() {
            const rule = [
                {
                    type: 'input',
                    field: 'goods_name',
                    title: '商品名称',
                    value: 'form-create',
                },
                {
                    type: 'checkbox',
                    field: 'label',
                    title: '标签',
                    value: [0, 1, 2, 3],
                    options: [
                        { label: '好用', value: 0 },
                        { label: '快速', value: 1 },
                        { label: '高效', value: 2 },
                        { label: '全能', value: 3 },
                    ],
                },
                {
                    type: 'a-button',
                    title: '自定义按钮',
                    native: false,
                    on: {
                        click() {
                            alert('点击了按钮');
                        },
                    },
                    children: ['按钮'],
                },
            ];
            const options = {
                onSubmit: (formData: any) => {
                    alert(JSON.stringify(formData));
                },
                resetBtn: true,
            };
            const fApi = ref({});

            return {
                rule,
                fApi,
                options,
            };
        },
    });
</script>

<template>
    <form-create :rule="rule" v-model:api="fApi" :option="options" />
</template>

目前方案： main.ts

import formCreate from '@form-create/ant-design-vue'
import ElementPlus from 'element-plus';
app.use(ElementPlus);
app.use(formCreate)

期望的结果： 组件被正确引入

[jackqiu0123]

@xaboy

[xaboy]

目前不支持自动按需加载, 需要手动导入一下 auto-import.js 文件

import formCreate from '@form-create/element-ui'
import install from '@form-create/element-ui/auto-import'
formCreate.use(install)
app.use(formCreate)

[jackqiu0123]

那大概要多久才可以支持呢， 我看有一个issue里ant-vue可以用 @xaboy

[jackqiu0123]

以及如果我想使用select-v2 虚拟组件的话，我需要自己手动注册吗？ @xaboy

[xaboy]

1. 按需导入目前还没有计划, 目前只能通过 auto-import 一次导入 form-create 所需要的组件
2. select-v2组件需要自己手动注册 @jackqiu0123