fix vite plugin

vue-project/my-kintone-plugin/README.md

@@ -10,6 +10,6 @@
 
 3. 关于组件：
    - 使用了 https://ui-component.kintone.dev/ 组件库，但是它没有支持 Vue，所以需要作为 Web Component 来使用
-   - 又由于 Web Component 的格式是类似 `<kuc-button-1-18-0>`，为了开发方便能写成 `<kuc-button>`，手动进行了全局替换（见 `vite.config.js`）
+   - 又由于 Web Component 的格式是类似 `<kuc-button-1-18-0>`，为了开发方便能写成 `<kuc-button>`，手动进行了全局替换和引入包（见 `vite.config.js`）
    - 同时也定死了 kintone-ui-component 版本号，更新版本号需要修改 `vite.config.js` 的插件
    - 目前尚未实现 `<template>` 中组件的 ts 提示

vue-project/my-kintone-plugin/src/main.ts

@@ -1,5 +1,4 @@
 import { createApp } from 'vue';
 import Config from './components/Config.vue';
-import allComponent from 'kintone-ui-component';
 
 createApp(Config, { pluginId: kintone.$PLUGIN_ID }).mount('#app');

vue-project/my-kintone-plugin/vite.config.js

@@ -10,9 +10,27 @@ function replaceKucTagsPlugin() {
       if (id.endsWith('.vue')) {
         const content = await fs.promises.readFile(id, 'utf-8');
 
-        return content
+        const usedComponent = {}
+
+        let res = content
           .replace(/<\/kuc-([a-zA-Z0-9-]+)(?![0-9-])>/g, (match, p1) => `</kuc-${p1}-1-18-0>`)
-          .replace(/<kuc-([a-zA-Z0-9-]+)(?![0-9-])([^>]*)>/g, (match, p1, p2) => `<kuc-${p1}-1-18-0${p2}>`);
+          .replace(/<kuc-([a-zA-Z0-9-]+)(?![0-9-])([^>]*)>/g, (match, p1, p2) => {
+            usedComponent[p1] = true;
+            return `<kuc-${p1}-1-18-0${p2}>`
+          });
+        if (Object.keys(usedComponent).length) {
+          let importScript = '<script lang="ts">'
+          Object.keys(usedComponent).forEach((key) => {
+            const keyPascal = key.split('-')
+              .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+              .join('');
+            importScript += `import * as Kuc${keyPascal} from "kintone-ui-component/lib/${key}";`
+          });
+          importScript += '</script>';
+          res = importScript + res;
+        }
+
+        return res;
       }
     }
   };