vue和element plus

### 如何在 Vue 项目中使用 Element Plus 组件库

#### 安装 Element Plus

为了将 Element Plus 添加到 Vue 项目中，可以选用喜欢的包管理工具来完成安装。对于 NPM 用户而言：

npm install element-plus --save

而对于 Yarn 和 pnpm 用户，则分别执行如下命令[^4]：

yarn add element-plus

pnpm install element-plus

#### 修改 `main.js` 文件引入 Element Plus

接下来，在新创建的 Vue 项目的入口文件 `main.js` 中导入并注册 Element Plus。这一步骤确保整个应用程序都可以访问 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')

这段代码展示了如何初始化 Vue 应用实例，并通过调用 `.use()` 方法加载 Element Plus 插件[^3]。

#### 自定义配置 (可选)

如果希望调整一些全局行为，如设置 z-index 或者更改尺寸单位等参数，可以在传给 `.use()` 函数的对象里指定相应的选项。然而，通常情况下，默认配置已经能够满足大部分需求[^2]。

#### 使用组件

一旦完成了上述步骤之后，就可以直接在模板内使用来自 Element Plus 的各种 UI 组件了。例如，要显示一个按钮，只需简单地写成 `<el-button>` 即可。

<template>
  <div id="app">
    <!-- 这是一个来自 Element Plus 的按钮 -->
    <el-button type="primary">点击这里</el-button>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped></style>