当前位置：首页 > 前端教程

vite elementui

2026-03-05 18:18:01前端教程

vite 集成 Element Plus 的步骤

确保已安装 Node.js 16+ 版本，创建一个新的 Vite 项目或使用现有项目。

安装 Element Plus 及其依赖：

npm install element-plus

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

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')

按需导入配置

安装 unplugin-vue-components 和 unplugin-auto-import 插件：

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

修改 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()],
    }),
  ],
})

主题定制方法

在 vite.config.js 中通过 SCSS 变量覆盖默认主题：

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "element-plus/theme-chalk/src/index.scss" as *;`,
      },
    },
  },
})

创建 src/styles/element-variables.scss 文件：

$--color-primary: #409EFF;
@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    "primary": (
      "base": $--color-primary,
    ),
  )
);

国际化支持

在入口文件中配置中文语言包：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

app.use(ElementPlus, {
  locale: zhCn,
})