Guide
API
Examples
Guide
API
Examples

Project Structure Comparison

This page compares the project structure before and after using ew-auto-import-tool, showing how the tool modifies your project configuration.

Before Using ew-auto-import-tool

A typical Vue 3 + Vite project structure before using the tool:

my-vue-app/ ├── node_modules/ ├── public/ ├── src/ │ ├── assets/ │ ├── components/ │ ├── App.vue │ └── main.ts ├── .gitignore ├── index.html ├── package.json ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts

vite.config.ts (Before)

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

tsconfig.json (Before)

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}

package.json (Before)

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}

After Using ew-auto-import-tool

After running ew-auto-import-tool with Element Plus, the project structure changes:

my-vue-app/ ├── node_modules/ ├── public/ ├── src/ │ ├── assets/ │ ├── components/ │ ├── App.vue │ └── main.ts ├── .gitignore ├── auto-imports.d.ts # New file ├── components.d.ts # New file ├── index.html ├── package.json # Updated ├── tsconfig.json # Updated ├── tsconfig.node.json └── vite.config.ts # Updated

vite.config.ts (After)

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 (After)

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}

package.json (After)

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}

auto-imports.d.ts (New File)

1/* eslint-disable */
2/* prettier-ignore */
3// @ts-nocheck
4// Generated by unplugin-auto-import
5export {}
6declare global {
7  const ElLoading: typeof import("element-plus/es")["ElLoading"];
8  const ElMessage: typeof import("element-plus/es")["ElMessage"];
9  const ElMessageBox: typeof import("element-plus/es")["ElMessageBox"];
10  const ElNotification: typeof import("element-plus/es")["ElNotification"];
11}

components.d.ts (New File)

1/* eslint-disable */
2/* prettier-ignore */
3// @ts-nocheck
4// Generated by unplugin-vue-components
5// Read more: https://github.com/vuejs/core/pull/3399
6import '@vue/runtime-core'
7
8export {};
9
10declare module "@vue/runtime-core" {
11  export interface GlobalComponents {
12    ElButton: typeof import("element-plus/es")["ElButton"];
13    ElInput: typeof import("element-plus/es")["ElInput"];
14    // ... other components
15  }
16}

Key Differences

  1. New Files:

    • auto-imports.d.ts - Type declarations for auto-imported APIs
    • components.d.ts - Type declarations for auto-imported components

  2. Updated Files:

    • vite.config.ts - Added auto-import plugins and resolvers
    • tsconfig.json - Added declaration files to include array
    • package.json - Added new dependencies

  3. Development Experience:

    • Before: Manual imports required for each component
    • After: Components and APIs are automatically imported

These changes significantly improve the development experience by reducing boilerplate code and allowing you to focus on building your application rather than managing imports.

ON THIS PAGE