Vue 3 + Vite 项目中按需引入 Element Plus (JavaScript)

1. 安装必要依赖

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

2. 配置 vite.config.js

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(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

3. 可选样式配置

3.1 完整引入样式 (推荐)

在 main.js 中：

import 'element-plus/dist/index.css'

3.2 按需引入样式 (需要额外安装插件)

npm install -D vite-plugin-style-import

然后在 vite.config.js 中添加：

import { createStyleImportPlugin } from 'vite-plugin-style-import'

export default defineConfig({
  plugins: [
    // ...其他插件
    createStyleImportPlugin({
      libs: [
        {
          libraryName: 'element-plus',
          esModule: true,
          ensureStyleFile: true,
          resolveStyle: (name) => {
            return `element-plus/es/components/${name.substring(3)}/style/css`
          },
        },
      ],
    }),
  ],
})

4. 使用组件

现在你可以直接在模板中使用 Element Plus 组件，无需手动导入：

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

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  }
}
</script>

5. 自定义主题 (可选)

在 vite.config.js 中添加：

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

然后创建 variables.scss 文件定义变量：

$--color-primary: #409EFF;

注意事项

1. 确保你的 Vue 版本是 3.x
2. 确保 Vite 版本是 2.x 或更高
3. 按需引入只适用于模板中使用的组件
4. 如果需要在 JS 中使用 ElMessage 等非组件 API，仍需手动导入：

import { ElMessage } from 'element-plus'

ElMessage.success('操作成功')