Element Plus 安装与配置指南 (Vue 3 + Vite + TS)

本文档将指导你如何在现有的 Vue 3 + Vite + TypeScript 项目中安装并配置 Element Plus。

1. 安装依赖

首先，使用你喜欢的包管理器安装 Element Plus。在项目根目录下运行以下命令之一：

bash 复制代码

# 使用 npm
npm install element-plus

# 使用 yarn
yarn add element-plus

# 使用 pnpm (推荐)
pnpm add element-plus

2. 引入方式选择

Element Plus 提供了两种引入方式：完整引入 和按需引入。

对于后台管理系统，通常推荐使用按需引入，这样可以有效减小最终打包的体积。

方案 A：按需引入 (推荐)

按需引入需要借助两个 Vite 插件来自动导入组件和样式。

1. 安装自动导入插件：

bash 复制代码

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

2. 配置 vite.config.ts：

打开项目根目录下的 vite.config.ts 文件，修改为如下内容：

typescript 复制代码

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 相关函数，如：ref, reactive, toRef 等
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    // 自动导入 Element Plus 组件
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

配置完成后，你就可以在模板中直接使用 <el-button> 等组件了，无需手动 import。

方案 B：完整引入 (最简单，但体积大)

如果你不想配置插件，或者不在乎打包体积，可以选择完整引入。

打开 src/main.ts，修改为如下内容：

typescript 复制代码

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 引入 Element Plus
import ElementPlus from 'element-plus'
// 引入 Element Plus 样式
import 'element-plus/dist/index.css'

const app = createApp(App)

// 使用 Element Plus
app.use(ElementPlus)
app.mount('#app')

3. 测试是否安装成功

打开 src/App.vue，清空原有内容，替换为以下代码进行测试：

vue 复制代码

<template>
  <div style="padding: 50px;">
    <h1>Element Plus 测试</h1>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
    
    <el-input placeholder="请输入内容" style="width: 200px; margin-top: 20px;" />
  </div>
</template>

<script setup lang="ts">
// 如果你使用了按需引入，这里不需要写任何 import 代码
</script>

保存后，查看浏览器，如果能看到带有样式的按钮和输入框，说明 Element Plus 安装成功！

4. (可选) 引入 Element Plus 图标

Element Plus 的图标库是独立分离的，如果需要使用图标，需要单独安装。

1. 安装图标库：

bash 复制代码

npm install @element-plus/icons-vue

2. 全局注册图标 (在 src/main.ts 中)：

typescript 复制代码

import { createApp } from 'vue'
import App from './App.vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)

// 注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

app.mount('#app')

3. 使用图标：

vue 复制代码

<template>
  <el-icon :size="20" color="#409EFC">
    <Edit />
  </el-icon>
</template>