引言

Element Plus是基于Vue 3的组件库，它继承了Element UI的优秀基因，为Vue 3应用提供了丰富的界面组件。Element Plus不仅拥有与Element UI相同的高质量组件，还针对Vue 3进行了优化和更新，确保了与Vue 3的无缝集成。

环境准备

在开始使用Vue 3和Element Plus构建Web应用之前，确保你的开发环境已经准备就绪。以下是环境准备的步骤：

确保Node.js和npm/yarn已安装

1.检查Node.js版本：

打开终端或命令提示符，输入以下命令来检查Node.js是否已安装以及其版本：

<code>node -v

如果没有安装Node.js，或者安装的版本低于推荐版本，你需要从Node.js官网下载并安装最新版本。

2.检查npm/yarn版本（也可以用更高性能的pnpm）：

npm是Node.js的包管理器，而yarn是另一个流行的包管理工具。你可以使用以下命令来检查npm或yarn是否已安装以及其版本：

npm -v

或者

yarn -v

如果没有安装npm或yarn，或者需要更新到最新版本，你可以根据需要进行安装或更新。

创建Vue 3项目（使用Vue CLI或Vite）

1.使用Vue CLI创建Vue 3项目：

Vue CLI是一个基于Vue.js进行快速开发的完整系统。首先，确保你已经全局安装了Vue CLI：

npm install -g @vue/cli

或者

yarn global add @vue/cli

然后，创建一个新的Vue 3项目：

vue create my-vue3-project

在创建过程中，选择Vue 3作为项目版本。

2.使用Vite创建Vue 3项目（更推荐这个，性能更好）：

Vite是一个现代的前端构建工具，它提供了快速的冷启动和即时热更新。首先，确保你已经全局安装了Vite：

npm install -g create-vite

或者

yarn create vite

然后，创建一个新的Vue 3项目：

create-vite my-vue3-project --template vue

或者

yarn create vite my-vue3-project --template vue

这将创建一个使用Vue 3的新项目。

安装Element Plus

Element Plus 是一个基于 Vue 3 的组件库，它提供了丰富的 UI 组件，可以帮助开发者快速构建高质量的用户界面。以下是使用 npm 或 yarn 安装 Element Plus 的步骤：

使用 npm 安装 Element Plus

在项目根目录下打开终端，执行以下命令：

npm install element-plus --save

使用 yarn 安装 Element Plus

在项目根目录下打开终端，执行以下命令：

yarn add element-plus

或者也可以使用性能更加好的pnpm 

引入 Element Plus 的 CSS 样式

安装完成后，需要引入 Element Plus 的 CSS 样式。这可以通过在项目的入口文件（通常是 main.js 或 main.ts）中添加以下代码来实现：

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

在 Vue 项目中全局注册 Element Plus 组件

为了在 Vue 项目中全局使用 Element Plus 组件，需要在创建 Vue 应用实例时使用 app.use() 方法来注册 Element Plus：

import { createApp } from 'vue'

import App from './App.vue'

import ElementPlus from 'element-plus'

const app = createApp(App)

app.use(ElementPlus)

app.mount('#app')

通过以上步骤，Element Plus 就已经成功安装并注册到你的 Vue 项目中了。现在，你可以在项目的任何组件中直接使用 Element Plus 提供的 UI 组件，无需在每个组件中单独导入。

注意事项

确保你的项目是基于 Vue 3 创建的，因为 Element Plus 是专门为 Vue 3 设计的。如果你的项目使用了 TypeScript，Element Plus 也提供了类型定义，可以无缝集成。Element Plus 提供了按需引入组件的功能，这可以帮助你进一步减小打包体积。你可以使用 babel-plugin-component 插件来实现按需引入。

基本使用

在 Vue 3 中，Element Plus 提供了一套丰富的组件库，用于构建现代化的用户界面。以下是如何在 Vue 3 项目中创建组件、局部注册 Element Plus 组件，并使用这些组件构建界面的步骤。

创建Vue组件

首先，你需要创建一个新的 Vue 组件。在 Vue 3 中，你可以使用单文件组件（SFC）的方式来创建组件。例如，创建一个名为 MyComponent.vue 的文件：

<template>

<div>

<el-button>默认按钮</el-button>

</div>

</template>

<script>

export default {

name: 'MyComponent'

}

</script>

<style scoped>

/* 在这里添加组件的样式 */

</style>

在组件中局部注册Element Plus组件

在 Vue 3 中，你可以使用 <script setup> 语法来局部注册 Element Plus 组件。这允许你在单个组件中使用 Element Plus 的组件，而不需要在全局范围内注册它们。以下是如何在组件中局部注册 Element Plus 的按钮组件的示例：

<template>

<div>

<el-button>默认按钮</el-button>

</div>

</template>

<script setup>

import { ElButton } from 'element-plus'

// 使用Element Plus的按钮组件

const Button = ElButton

</script>

<style scoped>

/* 在这里添加组件的样式 */

</style>

在上面的代码中，我们通过 import 语句从 element-plus 包中导入了 ElButton 组件，并在 <script setup> 块中将其注册为局部组件。然后在 <template> 中使用它。

使用Element Plus组件构建界面

现在，你已经了解了如何在 Vue 组件中局部注册 Element Plus 组件，接下来可以使用这些组件来构建你的界面。以下是一个使用 Element Plus 组件构建的简单界面示例：

<template>

<div>

<el-form :model="formModel" :rules="rules">code>

<el-form-item label="用户名" prop="username">code>

<el-input v-model="formModel.username"></el-input>code>

</el-form-item>

<el-form-item label="密码" prop="password">code>

<el-input type="password" v-model="formModel.password"></el-input>code>

</el-form-item>

<el-form-item>

<el-button type="primary" @click="submitForm">登录</el-button>code>

</el-form-item>

</el-form>

</div>

</template>

<script setup>

import { ref } from 'vue'

import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus'

const formModel = ref({

username: '',

password: ''

})

const rules = {

username: [

{ required: true, message: '请输入用户名', trigger: 'blur' }

],

password: [

{ required: true, message: '请输入密码', trigger: 'blur' }

]

}

</script>

<style scoped>

/* 在这里添加组件的样式 */

</style>

在这个示例中，我们使用了 Element Plus 的表单组件（el-form）、表单项组件（el-form-item）、输入框组件（el-input）和按钮组件（el-button）来构建一个简单的登录表单界面。

有的小伙伴可能不明白这个表单数据是怎么传达的，以及规则如何配置，下面我们展开讲讲

使用 :model 绑定数据和 :rules 绑定规则