# 前言

这里以 vite+vue3+ts 为例,需要安装 unplugin-vue-componentsunplugin-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',
  })]
})
更新于 阅读次数

请我喝[茶]~( ̄▽ ̄)~*

山河 微信支付

微信支付

山河 支付宝

支付宝

山河 贝宝

贝宝