基于Vue3和Element Plus实现自动导入功能

npm install element-plus
npm install -D unplugin-vue-components unplugin-auto-import

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

export default defineConfig({
  plugins: [
    vue(),
    // 自动导入 Vue 相关 API
    AutoImport({
      imports: ['vue'], // 自动导入 Vue 的 ref、computed 等
      resolvers: [ElementPlusResolver()], // 自动导入 Element Plus 组件
    }),
    // 自动导入 Vue 组件
    Components({
      resolvers: [ElementPlusResolver()], // 自动导入 Element Plus 组件
    }),
  ],
});

const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');

module.exports = {
  configureWebpack: {
    plugins: [
      // 自动导入 Vue 相关 API
      AutoImport({
        imports: ['vue'], // 自动导入 Vue 的 ref、computed 等
        resolvers: [ElementPlusResolver()], // 自动导入 Element Plus 组件
      }),
      // 自动导入 Vue 组件
      Components({
        resolvers: [ElementPlusResolver()], // 自动导入 Element Plus 组件
      }),
    ],
  },
};

<template>
  <el-button type="primary">按钮</el-button>
  <el-input v-model="inputValue" placeholder="请输入内容" />
</template>

<script setup>
// 无需手动导入 ref
const inputValue = ref('');
</script>

AutoImport({
  imports: ['vue', 'vue-router', 'pinia'], // 自动导入 Vue、Vue Router、Pinia
  resolvers: [ElementPlusResolver()],
}),
Components({
  resolvers: [ElementPlusResolver()],
}),

{
  "compilerOptions": {
    "types": ["element-plus/global"]
  }
}

npm install -D unplugin-element-plus

import ElementPlus from 'unplugin-element-plus/vite';

export default defineConfig({
  plugins: [
    ElementPlus(), // 按需加载 Element Plus 样式
  ],
});