vite elementui

使用 Vite 集成 Element Plus

Element Plus 是 Element UI 的 Vue 3 版本，与 Vite 兼容性良好。以下是集成步骤：

安装依赖：

npm install element-plus @element-plus/icons-vue

在 main.js 或 main.ts 中全局引入：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

按需引入（推荐）：

1. 安装 unplugin-vue-components 和 unplugin-auto-import：

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

2. 修改 vite.config.js：

   
   import AutoImport from 'unplugin-auto-import/vite'
   import Components from 'unplugin-vue-components/vite'
   import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default { plugins: [ AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], }

### 主题定制

通过 SCSS 变量覆盖默认主题：
1. 创建 `src/styles/element-variables.scss`：
```scss
@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    "primary": (
      "base": #1890ff,
    ),
  )
);

1. 在 vite.config.js 中配置：

   export default {
   css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/element-variables.scss" as *;`,
      },
    },
   },
   }

图标使用

Element Plus 图标需要单独引入：

<template>
  <el-icon><Edit /></el-icon>
</template>

<script setup>
import { Edit } from '@element-plus/icons-vue'
</script>

常见问题解决

Vite 开发环境下样式未加载： 确保在 main.js 中正确导入 CSS 文件路径为 element-plus/dist/index.css。

生产环境构建优化： 使用 vite-plugin-style-import 进一步优化按需加载的样式文件体积。

TypeScript 支持： 安装 @element-plus/types 获取完整的类型定义支持。