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

约定不等于承诺〃 2023-01-11 08:49 316阅读 0赞

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

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

#### 1、Element-Plus安装 ####

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

在依赖中搜做`element-plus`，即可找到依赖包，点击安装即可  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70]

##### （2）命令行界面安装 #####

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

vue add element-plus

#### 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')

#### 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')
      }
    ]

Button.vue中代码为：

最终效果为：  
![在这里插入图片描述][20210126113102494.png]

[https_element-plus.gitee.io_zh-CN_guide_design]: https://element-plus.gitee.io/#/zh-CN/guide/design
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70]: /images/20221119/65111237ab5b4db3ad25f10bf5be4af9.png
[20210126113102494.png]: https://img-blog.csdnimg.cn/20210126113102494.png