1、背景说明

    大部分的开发人员通过vue进行开发，vue给了骨架，那么美颜的事情就交给Element UI来处理了。

 

2、Vue3简介

      Vue的官方定义是一套用于构建用户界面的渐进式框架。vue只关心视图层，并且易于集成第三方的框架。比如：我们这次说的Element UI。

3、Element UI3 简介

       Element Plus 是基于Vue3开发的，面向设计师和开发者的组件库。目前使用这个组件的应用很多。

4、Element UI3安装

      在第一篇里面，完成环境的搭建之后，我们接下来集成Element UI3，我们切换到我们的项目目录下面，然后，执行如下命令：

npm install element-plus --save

修改main.js

// main.ts
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')

 修改App.vue,在模板组件中添加如下内容，

<el-row class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
    <el-button>中文</el-button>
  </el-row>

启动服务

npm run serve 

5、集成环境后测试

    

  出现上述界面代表集成成功 

备注：

6、环境支持#

Element Plus 可以在支持 ES2018 和 ResizeObserver 的浏览器上运行。 如果您确实需要支持旧版本的浏览器，请自行添加 Babel 和相应的 Polyfill 。

由于 Vue 3 不再支持 IE11，Element Plus 也不再支持 IE 浏览器。

Edge ≥ 79	Firefox ≥ 78	Chrome ≥ 64	Safari ≥ 12