vue3和typescript项目自动导入api和components

vue3和typescript项目自动导入api和components

• 安装自动导入api插件unplugin-auto-import

yarn add unplugin-auto-import -D

• 修改vite.config.ts配置,重启项目会在 src目录下生成一个 auto-import.d.ts 文件

  import AutoImport from 'unplugin-auto-import/vite' //注意后面有个/vite
  export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
    const root = process.cwd()
    const env = loadEnv(mode, root)
    return {
      plugins: [
        AutoImport({
          imports: ['vue', 'vue-router'],
          // 可以选择auto-import.d.ts生成的位置，使用ts建议设置为'src/auto-import.d.ts'
          dts: 'src/auto-import.d.ts'
        }),
      ]
    }
  })
  

• 安装自动导入组件插件unplugin-vue-components

  yarn add unplugin-vue-components -D
  

• 修改vite.config.ts配置,重启项目会在 src目录下生成一个 components.d.ts 文件

• import Components from 'unplugin-vue-components/vite' //注意后面有个/vite
  export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
    const root = process.cwd()
    const env = loadEnv(mode, root)
    return {
      plugins: [
        Components({
          dirs: ['src/components'],
          extensions: ['vue', 'tsx'],
          // 配置文件生成位置
          dts: 'src/components.d.ts'
        })
      ]
    }
  })