arco-design-vue 按需引入+自动 import+模板组件提示

非常感谢 番薯有才 在飞书中的回复，以下核心步骤均由他提供：

1. 使用 vite 创建一个 vue-ts 类型的项目，并安装所需的最小依赖：

   yarn create vite arco-design-vue-auto-import-tests --template vue-ts
   cd arco-design-vue-auto-import-tests
   yarn
   yarn add @arco-design/web-vue
   yarn add less less-loader unplugin-vue-components @arco-plugins/vite-vue -D
   

2. vite.config.ts 添加以下代码，实现模板和 import 自动导入：

   import { vitePluginForArco } from "@arco-plugins/vite-vue";
   import Components from 'unplugin-vue-components/vite';
   import { ArcoResolver } from 'unplugin-vue-components/resolvers';
   
   export default defineConfig({
     plugins: [
       ...
       Components({
         resolvers: [
           ArcoResolver({
             // importStyle: 'less', // 可以不写
             resolveIcons: true,
             // 这里必须设置为 true，否则 yarn build 不会将自动导入的 arco 组件的样式文件打包
             sideEffect: process.env.NODE_ENV === 'production',
           }),
         ],
         dts: false,
       }),
       vitePluginForArco({
         // theme: '填写主题包名，没有就不用配置这个属性',
         varsInjectScope: ['*'],
       }),
     ],
     ...
   });
   

3. src/vite-env.d.ts 添加以下代码，实现模板组件提示：

   declare global {
     import '@arco-design/web-vue/es/components';
   }
   

4. 删除模板项目中所有的自带的样式文件（重要）