unplugin-auto-import 自定义导入路径Taro+vue3+ts

unplugin-auto-import 是一个用于自动导入模块的 Vite 插件，可以帮助我们快速导入组件、函数、变量等等。在 Taro + Vue 3 + TypeScript 项目中使用 unplugin-auto-import 自定义导入路径的步骤如下：

1. 安装所需依赖：

npm install -D vite-plugin-auto-import

2. 在 Vite 配置文件中添加插件，并配置自定义导入：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      // 配置需要自动导入的模块
      imports: [
        {
          // 导入 Taro 组件
          path: '@tarojs/taro-vue',
          // 定义导入的名称
          imports: ['AtButton', 'AtIcon'],
        },
        {
          // 导入自定义组件
          path: '@/components/MyCustomComponent.vue',
          // 定义导入的名称
          imports: ['MyCustomComponent'],
        },
        {
          // 导入函数
          path: 'lodash/debounce',
          // 定义导入的名称
          imports: ['debounce'],
        },
        {
          // 导入变量
          path: '@/config',
          // 定义导入的名称
          imports: ['appConfig'],
        },
      ],
    }),
  ],
})

3. 在代码中使用自定义导入的模块：

<template>
  <view>
    <AtButton type="primary" @click="onClick">点击我</AtButton>
    <MyCustomComponent :text="text" />
  </view>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { AtButton, AtIcon } from '@tarojs/taro-vue'
import { debounce } from 'lodash'
import { appConfig } from '@/config'
import MyCustomComponent from '@/components/MyCustomComponent.vue'

export default defineComponent({
  components: {
    AtButton,
    AtIcon,
    MyCustomComponent,
  },
  setup() {
    const text = ref('Hello, Taro + Vue 3 + TypeScript!')
    const onClick = debounce(() => {
      console.log('click button')
    }, 500)
    return {
      text,
      onClick,
    }
  },
})
</script>

注意：在使用 unplugin-auto-import 插件时，需要在 tsconfig.json 文件中开启 "esModuleInterop": true，以支持模块导入。同时，在 Taro 中使用 Vue 3 时，需要引入 "@tarojs/taro-vue" 组件库来替换原有的 "@tarojs/components" 组件库。