VUE3.0学习系列随笔（六）：ElemenUI的安装和使用_vue30 element

VUE3.0学习系列随笔（六）：ElemenUI的安装和使用

经过实际测试，VUE2.0版本对应的ElementUI并不适用于VUE3.0，需要将安装版本更换为：Element-Plus，官网地址为：https://element-plus.gitee.io/#/zh-CN/guide/design，Element-Plus可以完美支持VUE3.0。

1、Element-Plus安装

（1）Vue3.0 UI管理界面安装

在依赖中搜做element-plus，即可找到依赖包，点击安装即可

（2）命令行界面安装

不同于vue2.0安装ElementUI的命令行命令，element-plus可以通过vue-cli3.x脚手架安装，在项目根目录运行以下命令：

vue add element-plus
1

2、Element-Plus全局引入

VUE3.0引入Element-Plus和VUE2.0引入ElmentUI的代码略有不同，在main.js中添加以下代码：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Head from '@/components/head.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

const Vue = createApp(App)

Vue.use(router)
Vue.use(ElementPlus)
Vue.component('Head', Head)
Vue.mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12
13
14

3、Element-Plus使用

Element-Plus的使用和Vue2.0中ElementUI的使用方法一致，不过相比于ElementUI，多了几个组件，比如Affix 固钉、Space 间距等等，本文以按钮组为例，演示使用效果。新建Button.vue，并在router文件夹中index.js添加路由配置，配置代码为：

const routes = [
  {
    path: '/button',
    name: 'Button',
    component: () => import('../views/Button.vue')
  }
]
1
2
3
4
5
6
7

Button.vue中代码为：

<template>
  <div>
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12

最终效果为：