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

在Vue 3和TypeScript项目中，可以使用Vite作为构建工具来自动导入API和组件。以下是一个简化的例子，展示如何自动导入API和组件：

首先，确保你的项目设置允许从特定的路径自动导入文件。例如，在tsconfig.json中配置baseUrl和paths：

{
  "compilerOptions": {
    "baseUrl": ".", // 设置基础路径为项目根目录
    "paths": {
      "@/*": ["src/*"] // 表示src目录下的任何文件都可以通过@/来访问
    }
    // ...其他配置
  }
}

然后，在.vitepress/config.ts或你的Vue项目中的vite.config.ts配置文件中，使用Vite的插件来实现自动导入：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
 
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // 设置别名以简化导入路径
    },
  },
});

最后，在你的组件或者API使用文件中，可以直接从对应的路径导入：

// 自动导入API
import myApiFunction from '@/api/myApi.js';
 
// 自动导入组件
import MyComponent from '@/components/MyComponent.vue';
 
// 使用API或组件
myApiFunction();

确保你的项目结构和导入路径与配置相匹配，这样就可以实现自动导入API和组件。