一、介绍 Element UI

Element UI （Element - 网站快速成型工具）是一套基于 Vue 2.0 的桌面端组件库，提供了丰富的、可复用的 UI 组件，可以帮助开发者快速构建美观、易用的 Web 界面。它具有以下特点：

• 丰富的组件: 提供了各种常用的组件，例如按钮、表单、表格、布局等，满足各种开发需求。
• 清晰的文档: 拥有完善的官方文档，方便开发者学习和使用。
• 易于使用: 基于 Vue 2.0 开发，易于上手，可以快速集成到 Vue 项目中。
• 主题定制: 支持主题定制，可以根据项目需求调整样式。

二、安装 Element UI

在已有的 Vue 2 项目中，可以通过 npm 或 yarn 安装 Element UI：

# 使用 npm npm i element-ui -S

在vue项目中使用elementui组件库

在项目目录中的src文件夹中打开main.js，添加以下几行代码：

// 导入 Element UI 和全部的样式
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

// 使用 Element UI
Vue.use(ElementUI)

保存，打开App.vue文件，在template​标签中添加以下代码：

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

使用npm run serve​运行vue项目，在页面上出现一个蓝色的按钮。

说明elementUI安装并使用成功！

这样我们就可以在vue项目中使用ElementUI的组件了。