基本示例#
本页面提供了 ew-auto-import-tool 的基本使用示例，帮助您快速了解工具的使用方法和效果。
使用前#
在使用自动导入工具之前，您需要手动导入每个组件，这会导致代码冗长且难以维护。
App.vue (使用前)#
1<template>
2 <div class="container">
3 <el-button type="primary">主要按钮</el-button>
4 <el-input v-model="input" placeholder="请输入内容"></el-input>
5 <el-select v-model="value" placeholder="请选择">
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// 需要手动导入每个组件
20import { ElButton, ElInput, ElSelect, ElOption } from "element-plus";
21// 还需要手动导入样式
22import "element-plus/dist/index.css";
23
24const input = ref("");
25const value = ref("");
26const options = [
27 { value: "选项1", label: "黄金糕" },
28 { value: "选项2", label: "双皮奶" },
29 { value: "选项3", label: "蚵仔煎" },
30];
31</script>vite.config.ts (使用前)#
1import { defineConfig } from "vite";
2import vue from "@vitejs/plugin-vue";
3
4export default defineConfig({
5 plugins: [vue()],
6});使用后#
使用 ew-auto-import-tool 配置后，您无需手动导入组件和样式，代码更加简洁和易于维护。
App.vue (使用后)#
1<template>
2 <div class="container">
3 <el-button type="primary">主要按钮</el-button>
4 <el-input v-model="input" placeholder="请输入内容"></el-input>
5 <el-select v-model="value" placeholder="请选择">
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
20// 无需手动导入组件和样式！
21
22const input = ref("");
23const value = ref("");
24const options = [
25 { value: "选项1", label: "黄金糕" },
26 { value: "选项2", label: "双皮奶" },
27 { value: "选项3", label: "蚵仔煎" },
28];
29</script>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});运行示例#
您可以在项目的 examples 目录中找到完整的示例项目。按照以下步骤运行示例：
1# 进入示例目录
2cd examples
3
4# 安装依赖
5pnpm install
6
7# 启动开发服务器
8pnpm dev示例项目结构#
示例项目包含以下文件和目录：
examples/
├── src/
│ ├── App.vue # 使用自动导入的组件
│ ├── components/ # 自定义组件目录
│ └── main.ts # 入口文件
├── auto-imports.d.ts # 自动生成的API声明文件
├── components.d.ts # 自动生成的组件声明文件
├── index.html # HTML入口文件
├── package.json # 项目配置文件
├── tsconfig.json # TypeScript配置
├── tsconfig.node.json # Node.js TypeScript配置
└── vite.config.ts # Vite配置文件
更多示例#
查看 项目结构对比 了解更多关于配置前后项目结构的变化。
ON THIS PAGE