Failed to resolve component: el-form

[shurong-wang]

vue和ui框架

Vue3、ElementPlus

问题描述

报警告：Failed to resolve component: el-form | el-form-item | el-input ... If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

页面显示空白，未能渲染处表单

如何复现

const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');
const { VueAmapResolver } = require('@vuemap/unplugin-resolver');

const path = require('path');

function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  runtimeCompiler: false,
  productionSourceMap: false,
  transpileDependencies: ['@lljj/vue3-form-element'],

  css: {
    loaderOptions: {
      sass: {
        prependData: `@use "@/styles/variables.scss" as *;`,
      },
    },
  },

  configureWebpack: (config) => {
    config.devtool = 'source-map';
    config.plugins = [
      ...config.plugins,
      AutoImport({
        imports: ['vue'],
        resolvers: [
          ElementPlusResolver({
            exclude: /^ElAmap[A-Z]*/,
          }),
          VueAmapResolver(),
        ],
        dts: './src/typings/auto-imports.d.ts',
        eslintrc: {
          enabled: true,
          filepath: './.eslintrc-auto-import.json',
          globalsPropValue: true,
        },
      }),
      Components({
        resolvers: [
          ElementPlusResolver({
            exclude: /^ElAmap[A-Z]*/,
          }),
          VueAmapResolver(),
        ],
        dts: './src/typings/components.d.ts',
      }),
    ];
    config.resolve.alias = {
      ...config.resolve.alias,
      Vue: 'vue',
    };
  },
};

期望的结果

猜测与配置了自动导入 ElementPlus 有关，但是手动导入 ElementPlus 组件仍然未能修复问题：

<script setup lang="tsx">
import { ElForm, ElFormItem } from 'element-plus';
import VueForm from '@lljj/vue3-form-element';

const formData = {};
const schema = {
  type: 'object',
  required: ['userName', 'age'],
  properties: {
    userName: {
      type: 'string',
      title: '用户名',
      default: 'Liu.Jun',
    },
    age: {
      type: 'number',
      title: '年龄',
    },
    bio: {
      type: 'string',
      title: '签名',
      minLength: 10,
      default: '知道的越多、就知道的越少',
    },
  },
};

const uiSchema = {
  bio: {
    'ui:options': {
      placeholder: '请输入你的签名',
      type: 'textarea',
      rows: 1,
    },
  },
};
</script>

[lljj-x]

参考这个 #169

vue3的全局组件是注册在当前的app实例上

[shurong-wang]

非常感谢，理解成在 mian.ts 中，进行如下补充对吧：

// 全局组件
import VueForm from '@lljj/vue3-form-element';
import { ElForm, ElFormItem, ElInput, ElInputNumber, ElSelect, ElDatePicker, ElButton, ElPopover } from 'element-plus';

// 创建 App
const app: Apptype<Element> = createApp(App);

// 注册全局组件
app.component('vue-form', VueForm);

app
  .use(ElForm)
  .use(ElFormItem)
  .use(ElInput)
  .use(ElInputNumber)
  .use(ElSelect)
  .use(ElDatePicker)
  .use(ElButton)
  .use(ElPopover)
  .mount('#app');

请教一下，mian.ts 中补充以上设置后，是否会与上文中 vue.config.js 的 AutoImport + ElementPlusResolver 配置产生冲突，vue.config.js 配置还需要做相应改动吗

如果可以的话，建议将自动加载 ElementPlus 配置下，使用 vue-json-schema-form 的注意事项加入文档中的”常见问题“。

[lljj-x]

这这里手动导入就可以了。

感谢建议 ，文档我不补充下这部分描述