# 前言
这里以 vite+vue3+ts 为例，需要安装 unplugin-vue-components 和 unplugin-auto-import 这两款插件unplugin-vue-components : 组件自动导入unplugin-auto-import： 直接使用 Vue Composition API 等，无需导入
npm init vite@latest vite-app --template vue-ts
npm i unplugin-vue-components unplugin-auto-import -D
npm install element-plus --save
# 配置
vite.config.ts
import { defineConfig } from 'vite' | |
import vue from '@vitejs/plugin-vue' | |
import Components from 'unplugin-vue-components/vite' | |
import AutoImport from 'unplugin-auto-import/vite' | |
// ElementPlusResolver, AntDesignVueResolver, VantResolver, HeadlessUiResolver, ElementUiResolver | |
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' | |
export default defineConfig({ | |
plugins: [vue(), AutoImport({ | |
// 'vue', 'vue-router', 'vue-i18n', '@vueuse/head', '@vueuse/core' | |
resolvers: [ElementPlusResolver()], | |
imports: ['vue'], | |
dts: 'src/auto-import.d.ts' | |
}), Components({ | |
// 指定组件默认位置 | |
// dirs: ['src/components'], | |
//ui 库解析器 | |
resolvers: [ | |
ElementPlusResolver(), | |
], | |
// 组件的有效文件扩展名 | |
extensions: ['vue'], | |
// 配置文件生成位置 | |
dts: 'src/components.d.ts', | |
})] | |
}) |
