指南
API
示例
指南
API
示例
简体中文

项目结构对比

本页面展示了使用 ew-auto-import-tool 前后项目结构的变化，帮助您了解工具对项目的影响。

配置前的项目结构

以下是一个典型的 Vue 3 + Vite 项目在使用自动导入工具之前的结构：

my-vue-app/ ├── node_modules/ ├── public/ ├── src/ │ ├── assets/ │ ├── components/ │ ├── App.vue # 需要手动导入组件 │ ├── main.ts │ └── vite-env.d.ts ├── .gitignore ├── index.html ├── package.json # 不包含组件库和自动导入插件 ├── tsconfig.json # 不包含类型声明文件引用 ├── tsconfig.node.json └── vite.config.ts # 不包含自动导入插件配置

package.json (配置前)

1{
2  "name": "my-vue-app",
3  "private": true,
4  "version": "0.0.0",
5  "type": "module",
6  "scripts": {
7    "dev": "vite",
8    "build": "vue-tsc && vite build",
9    "preview": "vite preview"
10  },
11  "dependencies": {
12    "vue": "^3.3.4"
13  },
14  "devDependencies": {
15    "@vitejs/plugin-vue": "^4.2.3",
16    "typescript": "^5.0.2",
17    "vite": "^4.4.5",
18    "vue-tsc": "^1.8.5"
19  }
20}

vite.config.ts (配置前)

1import { defineConfig } from "vite";
2import vue from "@vitejs/plugin-vue";
3
4export default defineConfig({
5  plugins: [vue()],
6});

tsconfig.json (配置前)

1{
2  "compilerOptions": {
3    "target": "ES2020",
4    "useDefineForClassFields": true,
5    "module": "ESNext",
6    "lib": ["ES2020", "DOM", "DOM.Iterable"],
7    "skipLibCheck": true,
8    "types": ["vite/client"]
9  },
10  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
11}

配置后的项目结构

使用 ew-auto-import-tool 配置后，项目结构会有以下变化：

my-vue-app/ ├── node_modules/ # 新增了组件库和自动导入插件 ├── public/ ├── src/ │ ├── assets/ │ ├── components/ │ ├── App.vue # 无需手动导入组件 │ ├── main.ts │ └── vite-env.d.ts ├── .gitignore ├── auto-imports.d.ts # 新增：API 自动导入声明文件 ├── components.d.ts # 新增：组件自动导入声明文件 ├── index.html ├── package.json # 更新：添加了组件库和自动导入插件 ├── tsconfig.json # 更新：引用了声明文件 ├── tsconfig.node.json └── vite.config.ts # 更新：添加了自动导入插件配置

package.json (配置后)

1{
2  "name": "my-vue-app",
3  "private": true,
4  "version": "0.0.0",
5  "type": "module",
6  "scripts": {
7    "dev": "vite",
8    "build": "vue-tsc && vite build",
9    "preview": "vite preview"
10  },
11  "dependencies": {
12    "element-plus": "^2.3.14",
13    "vue": "^3.3.4"
14  },
15  "devDependencies": {
16    "@vitejs/plugin-vue": "^4.2.3",
17    "typescript": "^5.0.2",
18    "unplugin-auto-import": "^0.16.6",
19    "unplugin-vue-components": "^0.25.2",
20    "vite": "^4.4.5",
21    "vue-tsc": "^1.8.5"
22  }
23}

vite.config.ts (配置后)

1import { defineConfig } from "vite";
2import vue from "@vitejs/plugin-vue";
3import AutoImport from "unplugin-auto-import/vite";
4import Components from "unplugin-vue-components/vite";
5import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
6
7export default defineConfig({
8  plugins: [
9    vue(),
10    AutoImport({
11      resolvers: [ElementPlusResolver()],
12    }),
13    Components({
14      resolvers: [ElementPlusResolver()],
15    }),
16  ],
17});

tsconfig.json (配置后)

1{
2  "compilerOptions": {
3    "target": "ES2020",
4    "useDefineForClassFields": true,
5    "module": "ESNext",
6    "lib": ["ES2020", "DOM", "DOM.Iterable"],
7    "skipLibCheck": true,
8    "types": ["vite/client"]
9  },
10  "include": [
11    "src/**/*.ts",
12    "src/**/*.d.ts",
13    "src/**/*.tsx",
14    "src/**/*.vue",
15    "components.d.ts",
16    "auto-imports.d.ts"
17  ]
18}

components.d.ts (新增)

1// generated by unplugin-vue-components
2// We suggest you to commit this file into source control
3// Read more: https://github.com/vuejs/core/pull/3399
4import "@vue/runtime-core";
5
6declare module "@vue/runtime-core" {
7  export interface GlobalComponents {
8    ElButton: typeof import("element-plus")["ElButton"];
9    ElInput: typeof import("element-plus")["ElInput"];
10    ElOption: typeof import("element-plus")["ElOption"];
11    ElSelect: typeof import("element-plus")["ElSelect"];
12    // ... 其他组件
13  }
14}
15
16export {};

auto-imports.d.ts (新增)

1// generated by unplugin-auto-import
2// We suggest you to commit this file into source control
3declare global {
4  const ElLoading: typeof import("element-plus/es")["ElLoading"];
5  const ElMessage: typeof import("element-plus/es")["ElMessage"];
6  const ElMessageBox: typeof import("element-plus/es")["ElMessageBox"];
7  const ElNotification: typeof import("element-plus/es")["ElNotification"];
8  // ... 其他API
9}
10
11export {};

主要变化

使用 ew-auto-import-tool 后，项目有以下主要变化：

  1. 新增依赖：

    • 组件库（如 Element Plus）
    • unplugin-auto-import
    • unplugin-vue-components

  2. 配置文件更新：

    • vite.config.ts 添加了自动导入插件配置
    • tsconfig.json 添加了声明文件引用

  3. 新增文件：

    • components.d.ts - 组件类型声明文件
    • auto-imports.d.ts - API 类型声明文件

  4. 代码简化：

    • 无需手动导入组件和样式
    • 提供完整的类型支持和代码补全

这些变化使得开发更加高效，代码更加简洁，同时保持了完整的类型支持。

ON THIS PAGE