Vue引入并使用Element-UI组件库的两种方式

喜欢ヅ旅行 2023-09-23 21:55 65阅读 0赞

## 前言 ##

在开发的时候，虽然我们可以自己写css或者js甚至一些动画特效，但是也有很多开源的组件库帮我们写好了。我们只需要下载并引入即可。

vue和element-ui在开发中是比较般配的，也是我们开发中用的很多的，下面就介绍下如何在eue项目中引入element-ui组件库

> 注意：本文介绍的是vue2.0引用Element-UI，如果是vue3.0就应该使用Element-Plus，也叫Element+，如果vue2.0安装Element-Plus是会有版本问题的。

## Element-ui(饿了么ui) ##

element-ui(饿了么ui)是一个非常好用且美观的组件库(插件库)，主要用于网站快速成型，由国产团队饿了么团队开发的，所有又称饿了么ui。

不管是任何的ui组件库，都不需要死记硬背，需要使用的时候查阅官方文档即可，官方让怎么写，我们就怎么写即可，主要的工作就是复制粘贴，任何的组件库写法都是一样的大同小异的。

官网：[elementui官网文档][elementui]

这里会提示不同的vue不同的版本对应的element-ui不同的官方，当然模式跳转的还是2.0版本，由此可以断定目前使用vue2.0和element-ui2.0的还是较多的

这里我使用的是vue2.0所以使用element-ui2.0即可

![在这里插入图片描述][71e4c1bd42464a7582e57173e1d37754.png]  
点击组件即可跳到组件使用说明主页

![在这里插入图片描述][b2945c38491445489a03fbdb8d4c2c62.png]

## 安装element-ui ##

根据官网的说明，首先需要安装element-ui，当然也可以在线使用link引入，推荐还是使用脚手架安装使用

![在这里插入图片描述][4cee256446fa4f1bb8438c609a8bb791.png]

打开终端，输入：

> npm i element-ui

![在这里插入图片描述][e78c71f9ac6d49e6ae0d59010c73cbb5.png]

## 引入element-ui ##

可以看到官网提供的引入方式有两种，分别为完整引入和按需引入，下面一一介绍

![在这里插入图片描述][2d9e8d8f968a4157bf40fd1019a685e0.png]

### 完整引入element-u ###

在main.js里面引入element-ui

![在这里插入图片描述][1aeb919f7d7d4b808267589afdcedd44.png]

// 引入Vue
    import Vue from 'vue'
    // 引入App
    import App from './App.vue'
    // 引入elemetn-ui组件库
    import ElementUI from 'element-ui';
    // 引入element-ui全部css
    import 'element-ui/lib/theme-chalk/index.css';
    // 关闭Vue的生产提示
    Vue.config.productionTip=false
    // 使用element
    Vue.use(ElementUI)
    // 创建vm 
    const vm=new Vue({
        
        el:'#app',
        render:h=>h(App),  
    })

#### 使用element-ui的元素 ####

引入完成后，就可以随便使用它的组件样式了，想要使用element-ui的元素组件非常简单，复制粘贴就完事了

这里我为了对比使用了原生的按钮和element-ui提供的按钮

找到想用的组件，复制即可

![在这里插入图片描述][4b2e3aad2abe4484a0f8c2c92160987c.png]  
复制到代码里面

![在这里插入图片描述][fd0a5225e57145ed943433109e926fcb.png]

只能说，没有对比就没有伤害

![在这里插入图片描述][085b146213584a4aaa165825798bb1d6.png]

它其实就是一个个封装好的组件，可以通过开发者工具看到

![在这里插入图片描述][35e9246adba947e6b714d62b597b58c6.png]

如果说这按钮我们也能写，但是如果使用比较复杂的组件让我们自己写那就真的很费劲了，选择使用一个复杂的组件：日历

![在这里插入图片描述][efb582f2ee5d419891b4b31e2a8c144a.png]

再复杂也不怕，直接复制即可

直接拿来就用，这不香吗？

![在这里插入图片描述][fc2adb48db7a4b2cb72f50ae5adebd72.png]

每一个组件都有对应的参数，需要往下滑动，如下是button的属性说明：

![在这里插入图片描述][a02c14d45f0147458fbc57c0d586b995.png]

但是这种全部引用也是有问题的，我们现在只用到了3个组件，但是这种全部引用的方式相当于把element-ui全部的组件都帮我们引用了，有点浪费资源，如下图在network中可以看到

![在这里插入图片描述][62efaaca94644a37b55689613e0b28bb.png]

针对这种情况，就有了第二种引入方式：按需引入

### 按需引入element-ui ###

按需引入就是一不同于全部引入，不会一上来引入全局的组件和样式，而是看使用了哪些组件，根据使用的组件进行注册，并且只引入这些组件相关的样式，下面开始操作

首先就是先把完整引入的代码进行注释，然后查看官网

![在这里插入图片描述][017d0843e9fc4541850915cafd57b1ac.png]

点击这个蓝色的地址，会跳向github，值得注意的是这个按需引入的作者是ant design团队进行开发的(ant design也推出了可以给vue使用的ui组件库)

![在这里插入图片描述][0f68b9c3d2d447539a42211a57e33c73.png]  
接下来回到文档，安装文档说明进行操作

#### 安装 babel-plugin-component ####

打开终端，输入：

> npm install babel-plugin-component -D

![在这里插入图片描述][44cdc873619f41528d99954a5b2452b8.png]

#### 修改.babelrc(babel.config.js) ####

最新的脚手架已经不叫了.babelrc，而是babel.config.js

![在这里插入图片描述][b6090780f9584c8a9f8d350888d518fb.png]

#### 引入需要的组件 ####

![在这里插入图片描述][a0187741549c4625abe1d2cb3361978d.png]

![在这里插入图片描述][f33a3c9794f54f279815f2d5a1bf10d5.png]

#### 解决报错 ####

这时候启动，发现报错了，这个错误不是我们的锅，是由于脚手架和组件库不统一造成的

![在这里插入图片描述][429d956ad98a4f21897aef008d00bec3.png]

提示什么东西not found就使用npm i xxx安装即可

![在这里插入图片描述][01513a6a7f9d4fa2926a88d0064b6433.png]  
这时候又报错了

![在这里插入图片描述][870fa0ae20f9451189c57289c5326cce.png]

这个错误是因为脚手架版本的问题，更换即可babel预设环境即可，这个错误比较恶心

如果说缺什么安装什么即可

module.exports = {
        
      presets: [
        '@vue/cli-plugin-babel/preset',
        ["@babel/preset-env", {
         "modules": false }],
      ],
      plugins:[
          [
            "component",
            {
        
              "libraryName": "element-ui",
              "styleLibraryName": "theme-chalk"
            }
          ]
        ]
    }

![在这里插入图片描述][0f229190693b4b81a317d864beddf019.png]

改过之后就解决了

![在这里插入图片描述][10ed790acb2b44deb64684e036a088bb.png]  
再次访问页面发现样式还在，并且体积变小了

![在这里插入图片描述][6a6da2f40ac44da0ae4675c694a6b5d8.png]

## 总结 ##

其他的组件库使用也是和上述步骤大同小异的。

[elementui]: https://element.eleme.cn/#/zh-CN
[71e4c1bd42464a7582e57173e1d37754.png]: https://img-blog.csdnimg.cn/71e4c1bd42464a7582e57173e1d37754.png
[b2945c38491445489a03fbdb8d4c2c62.png]: https://img-blog.csdnimg.cn/b2945c38491445489a03fbdb8d4c2c62.png
[4cee256446fa4f1bb8438c609a8bb791.png]: https://img-blog.csdnimg.cn/4cee256446fa4f1bb8438c609a8bb791.png
[e78c71f9ac6d49e6ae0d59010c73cbb5.png]: https://img-blog.csdnimg.cn/e78c71f9ac6d49e6ae0d59010c73cbb5.png
[2d9e8d8f968a4157bf40fd1019a685e0.png]: https://img-blog.csdnimg.cn/2d9e8d8f968a4157bf40fd1019a685e0.png
[1aeb919f7d7d4b808267589afdcedd44.png]: https://img-blog.csdnimg.cn/1aeb919f7d7d4b808267589afdcedd44.png
[4b2e3aad2abe4484a0f8c2c92160987c.png]: https://img-blog.csdnimg.cn/4b2e3aad2abe4484a0f8c2c92160987c.png
[fd0a5225e57145ed943433109e926fcb.png]: https://img-blog.csdnimg.cn/fd0a5225e57145ed943433109e926fcb.png
[085b146213584a4aaa165825798bb1d6.png]: https://img-blog.csdnimg.cn/085b146213584a4aaa165825798bb1d6.png
[35e9246adba947e6b714d62b597b58c6.png]: https://img-blog.csdnimg.cn/35e9246adba947e6b714d62b597b58c6.png
[efb582f2ee5d419891b4b31e2a8c144a.png]: https://img-blog.csdnimg.cn/efb582f2ee5d419891b4b31e2a8c144a.png
[fc2adb48db7a4b2cb72f50ae5adebd72.png]: https://img-blog.csdnimg.cn/fc2adb48db7a4b2cb72f50ae5adebd72.png
[a02c14d45f0147458fbc57c0d586b995.png]: https://img-blog.csdnimg.cn/a02c14d45f0147458fbc57c0d586b995.png
[62efaaca94644a37b55689613e0b28bb.png]: https://img-blog.csdnimg.cn/62efaaca94644a37b55689613e0b28bb.png
[017d0843e9fc4541850915cafd57b1ac.png]: https://img-blog.csdnimg.cn/017d0843e9fc4541850915cafd57b1ac.png
[0f68b9c3d2d447539a42211a57e33c73.png]: https://img-blog.csdnimg.cn/0f68b9c3d2d447539a42211a57e33c73.png
[44cdc873619f41528d99954a5b2452b8.png]: https://img-blog.csdnimg.cn/44cdc873619f41528d99954a5b2452b8.png
[b6090780f9584c8a9f8d350888d518fb.png]: https://img-blog.csdnimg.cn/b6090780f9584c8a9f8d350888d518fb.png
[a0187741549c4625abe1d2cb3361978d.png]: https://img-blog.csdnimg.cn/a0187741549c4625abe1d2cb3361978d.png
[f33a3c9794f54f279815f2d5a1bf10d5.png]: https://img-blog.csdnimg.cn/f33a3c9794f54f279815f2d5a1bf10d5.png
[429d956ad98a4f21897aef008d00bec3.png]: https://img-blog.csdnimg.cn/429d956ad98a4f21897aef008d00bec3.png
[01513a6a7f9d4fa2926a88d0064b6433.png]: https://img-blog.csdnimg.cn/01513a6a7f9d4fa2926a88d0064b6433.png
[870fa0ae20f9451189c57289c5326cce.png]: https://img-blog.csdnimg.cn/870fa0ae20f9451189c57289c5326cce.png
[0f229190693b4b81a317d864beddf019.png]: https://img-blog.csdnimg.cn/0f229190693b4b81a317d864beddf019.png
[10ed790acb2b44deb64684e036a088bb.png]: https://img-blog.csdnimg.cn/10ed790acb2b44deb64684e036a088bb.png
[6a6da2f40ac44da0ae4675c694a6b5d8.png]: https://img-blog.csdnimg.cn/6a6da2f40ac44da0ae4675c694a6b5d8.png