目录

前言

一、安装Element Plus 

二、使用 element-plus

1.引入 element-plus

2.编写页面查看element-plus效果

三、总结

---

前言

安装vue后，我们需要选择一个自己喜欢的UI框架，这里我们选中Element Plus，注意一定是Element Plus，Element 并不支持vue 3.0。

Element Plus 官网地址：https://element-plus.gitee.io/zh-CN/

---

一、安装Element Plus 

打开控制台，切换到自己的项目目录下，执行下面的命令：

# 选择一个你喜欢的包管理器

# NPM
npm install element-plus --save

# Yarn
yarn add element-plus

# pnpm
pnpm install element-plus

执行完成后，如下图所示：

安装成功后，打开项目目录下的package.json ,看到dependencies中已经添加了element-plus，版本是 "1.3.0-beta.5"，如下：

 "dependencies": {
    "core-js": "^3.6.5",
    "element-plus": "^1.3.0-beta.5",
    "vue": "^3.0.0"
  },

二、使用 element-plus

1.引入 element-plus

修改main.js文件，引入element-plus，如下：

import { createApp } from 'vue'

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

import App from './App.vue'

const app = createApp(App).mount('#app')

app.use(ElementPlus)

2.编写页面查看element-plus效果

修改App.vue文件，使用button查看element-plus效果，如下：

<template>
  <!-- <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/> -->
  <el-button>I am ElButton</el-button>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
  import { ElButton } from 'element-plus'

export default {
  name: 'App',
  components: {
    // HelloWorld
    ElButton
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

页面中注释掉的代码为默认创建的代码即HelloWorld组件的代码，使用el-button组件的方法与使用HellWorld写法一致，在template中添加组件，在script中导入element-plus的ELButton。保存后查看页面效果如下：

---

继续加入几个button，看一下效果，代码如下：

<template>
  <!-- <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/> -->
  <el-button>I am ElButton</el-button>
<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>

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

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

</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
  import { ElButton } from 'element-plus'

export default {
  name: 'App',
  components: {
    // HelloWorld
    ElButton,
    
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 效果显示如下：

三、总结

到此，我们就完成了 Element-plus 的集成，过程完全参照Element-plus官方文档和HelloWorld组件的引入方式完成了最终的效果。