---

前言

Element，一套为开发者、设计师和产品经理准备的基于 Vue 的桌面端组件库。开发 Vue 项目时，我们可以借助Element 提供的组件，更快更好的开发项目

---

一、安装

需有创建好 Vue 项目，这里可以参考 vue-cli3快速搭建Vue项目

在项目根目录下安装：
Vue 2.X 版本

npm i element-ui -S

Vue 3.X 版本

npm i element-plus -S

在项目 package.json 文件的依赖中可以看见版本号即安装成功

二、使用步骤

1.引入库

在 mian.js 中引入相关库，并配置
代码如下：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

2.使用组件

上述配置好后，我们便可以在 vue 文件中使用 element-ui 提供的一系列组件，详情可以看 element-ui 的官方文档和 element-plus 的官方文档

1.按钮组件：

<el-button type="primary">按钮</el-button>

2.一个表单：

<el-form>
        <el-form-item >
            <el-input placeholder="请输入用户名">
                <i slot="prefix" class="el-icon-user"></i>
            </el-input>
        </el-form-item>
        <el-form-item >
            <el-input placeholder="请输入密码" show-password>
                <i slot="prefix" class="el-icon-lock"></i>
            </el-input>
        </el-form-item>
        <el-form-item>
            <el-button 
            type="primary" 
            style="width:100%"
            @click="login">登录</el-button>
        </el-form-item>
    </el-form>

---

总结

以上主要讲解了 element-ui 的安装和引入，这些准备好后我们就可以使用官方文档提供的组件实例，然后把组件实例修改成我们需要的即可。