基于Vue defineCustomElement生成CEM及IDE提示问题求助

1. 安装Vue专属分析插件 #

@custom-elements-manifest/analyzer默认识别不了Vue的.ce.vue特殊格式文件，必须安装官方对应的Vue插件：

npm install -D @custom-elements-manifest/analyzer-plugin-vue

2. 添加分析器配置文件 #

在项目根目录创建custom-elements-manifest.config.cjs，配置插件并指定扫描路径：

const vuePlugin = require('@custom-elements-manifest/analyzer-plugin-vue');

module.exports = {
  plugins: [vuePlugin()],
  globs: ['./src/**/*.ce.vue'], // 精确指定要分析的自定义元素组件文件
};

3. 规范组件的JSDoc与属性定义 #

在Test.ce.vue中必须用JSDoc明确标注自定义元素标签名和属性信息，示例：

<template>
  <div>{{ label }}</div>
</template>

<script setup>
/**
 * 测试自定义元素组件
 * @element xl-test
 * @property {string} label - 组件显示的文本标签
 */
defineProps({
  label: {
    type: String,
    required: false,
    default: '默认文本'
  }
});
</script>

注意：@element标签必须和你实际注册的自定义元素标签名完全一致，这是分析器识别的关键。

4. 调整package.json脚本 #

添加生成自定义元素清单的命令，同时确保build脚本正确输出组件：

{
  "scripts": {
    "build": "vite build",
    "build:manifest": "cem analyze"
  }
}

5. 检查Vite配置的正确性 #

确保Vite启用了自定义元素支持，vite.config.ts示例：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue({
    customElement: true, // 必须开启自定义元素模式
  })],
  build: {
    lib: {
      entry: './src/index.ts',
      formats: ['es'],
      fileName: 'lib-components'
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
});

6. 运行生成命令 #

执行以下命令生成custom-elements.json：

npm run build:manifest

配置VSCode属性提示 #

生成清单文件后，在项目根目录的jsconfig.json或tsconfig.json中添加配置，让VSCode读取清单提供提示：

{
  "compilerOptions": {
    "customElements": "./custom-elements.json"
  }
}

常见排查点 #

• 手动指定扫描路径测试：执行cem analyze --globs ./src/**/*.ce.vue，确认是否能找到目标文件
• 检查index.ts中的组件注册代码，确保标签名一致：

  import { defineCustomElement } from 'vue';
  import Test from './Test.ce.vue';
  
  customElements.define('xl-test', defineCustomElement(Test));
  
  export { Test };
  

• 确认JSDoc的@element标签拼写和注册的标签名完全匹配

内容的提问来源于stack exchange，提问作者user3641300