vue3element

### Vue 3 和 Element Plus 使用指南

#### 一、Element Plus 简介

Element Plus 是基于 Vue 3 的桌面端组件库，提供了丰富的 UI 组件和灵活的 API 接口。这些特性使其成为构建现代化 Web 应用的理想选择[^1]。

#### 二、安装 Element Plus

##### 2.1 安装 Element Plus

为了在项目中使用 Element Plus，可以通过 npm 或 yarn 进行安装：

npm install element-plus --save

或者

yarn add element-plus

##### 2.2 引入 Element Plus

完成安装后，可以在项目的入口文件 `main.js` 中全局引入 Element Plus 及其样式文件：

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

#### 三、使用 Element Plus 组件

##### 3.1 创建组件

假设要创建一个简单的用户注册表单，可以按照以下方式编写代码：

<template>
  <el-form :model="form" label-width="80px">
    <el-form-item label="用户名">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input type="password" v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref } from 'vue';

let form = ref({
  username: '',
  password: ''
});

function onSubmit() {
  console.log('submit!', form.value);
}
</script>

##### 3.2 组件引入

如果只需要部分组件，则可以选择按需加载的方式减少打包体积。这通常借助于插件如 `unplugin-vue-components` 来实现自动化处理[^2]。

#### 四、总结

通过上述介绍可以看出，在 Vue 3 中集成 Element Plus 并不复杂。无论是完整的引入还是按需加载特定组件都能满足不同场景下的需求。对于更详细的配置选项和其他高级特性的应用，请参阅官方文档获取更多信息。