Basic Examples
This page provides basic usage examples of ew-auto-import-tool to help you quickly understand how to use the tool and its effects.
Before Using
Before using the auto-import tool, you need to manually import each component, which leads to verbose code that is difficult to maintain.
App.vue (Before)
1<template>
2 <div class="container">
3 <el-button type="primary">Primary Button</el-button>
4 <el-input v-model="input" placeholder="Please input"></el-input>
5 <el-select v-model="value" placeholder="Please select">
6 <el-option
7 v-for="item in options"
8 :key="item.value"
9 :label="item.label"
10 :value="item.value"
11 >
12 </el-option>
13 </el-select>
14 </div>
15</template>
16
17<script setup lang="ts">
18import { ref } from "vue";
19// Need to manually import each component
20import { ElButton, ElInput, ElSelect, ElOption } from "element-plus";
21// Also need to manually import styles
22import "element-plus/dist/index.css";
23
24const input = ref("");
25const value = ref("");
26const options = [
27 { value: "option1", label: "Option 1" },
28 { value: "option2", label: "Option 2" },
29 { value: "option3", label: "Option 3" },
30];
31</script>
vite.config.ts (Before)
1import { defineConfig } from "vite";
2import vue from "@vitejs/plugin-vue";
3
4export default defineConfig({
5 plugins: [vue()],
6});
After Using
After using ew-auto-import-tool, components and APIs are automatically imported, making the code cleaner and more maintainable.
App.vue (After)
1<template>
2 <div class="container">
3 <el-button type="primary">Primary Button</el-button>
4 <el-input v-model="input" placeholder="Please input"></el-input>
5 <el-select v-model="value" placeholder="Please select">
6 <el-option
7 v-for="item in options"
8 :key="item.value"
9 :label="item.label"
10 :value="item.value"
11 >
12 </el-option>
13 </el-select>
14 </div>
15</template>
16
17<script setup lang="ts">
18// No need to manually import components
19// They are automatically imported
20const input = ref("");
21const value = ref("");
22const options = [
23 { value: "option1", label: "Option 1" },
24 { value: "option2", label: "Option 2" },
25 { value: "option3", label: "Option 3" },
26];
27</script>
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});
Project Structure Comparison
For a detailed comparison of project structures before and after using ew-auto-import-tool, see the Project Structure page.
