基于 Vite + Vue3 项目中三种引入 Element Plus 方式的对照说明

在Vite + Vue 3项目中，可以通过以下三种方式引入Element Plus组件库：

1. 完整引入：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
 
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

2. 按需引入（使用unplugin-vue-components和unplugin-auto-import）：

   首先安装依赖：

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

然后配置vite.config.js：

// vite.config.js
import { defineConfig } from 'vite'
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: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

3. 使用Babel插件babel-plugin-import（适用于按需加载组件和样式）：

   首先安装babel插件：

npm install -D babel-plugin-import

然后配置.babelrc：

{
  "plugins": [
    [
      "import",
      {
        "libraryName": "element-plus",
        "customStyleName": (name) => {
          // 引入对应的样式
          return `element-plus/theme-chalk/${name}.css`;
        }
      }
    ]
  ]
}

以上三种方式可以根据项目需求和偏好选择。完整引入会包含所有组件和样式，而按需引入则可以减少不必要的资源加载。通过Babel插件的方式可以在编译时配置加载特定的组件和样式文件。