vue项目中引入elelmentui

### 安装和配置 Element UI

对于 Vue 项目的设置，可以采用两种主要方式来集成 Element UI：整体引入或按需加载。

#### 整体引入 Element UI

当选择整体引入时，在 `main.js` 文件中执行如下操作：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

这种方式简单快捷，适合希望快速启动并运行应用的情况[^1]。

#### 按需引入 Element Plus (适用于 Vue 3)

针对 Vue 3 的项目，则推荐使用 Element Plus 并采取按需引入的方式。这不仅减少了打包体积还提高了性能。具体步骤如下：

通过 npm 或 yarn 来安装依赖包:

npm install element-plus --save
# or
yarn add element-plus

接着可以在 `main.js` 中仅导入所需的组件和服务：

// 导入特定组件而非整个库
import { ElButton, ElMessageBox } from 'element-plus';
import 'element-plus/lib/theme-chalk/el-button.css'; // 单独样式表
import 'element-plus/lib/theme-chalk/base.css';      // 基础样式

app.component('el-button', ElButton);               // 注册单个组件
app.config.globalProperties.$msgbox = ElMessageBox; // 添加全局方法/属性

此法能够有效减少不必要的资源消耗，提升应用程序效率[^2]。

#### 配置文件调整

无论哪种引入方式，都需要确保在相应的入口文件（通常是 `src/main.js`）里完成必要的注册工作之后再初始化 Vue 实例。这样做的目的是让所有的自定义配置生效于整个应用生命周期内[^3]。