vue 使用 Element-ui 组件库 - 完整引入

2023-06-14
北京
本文字数：1024 字
阅读完需：约 3 分钟

element-ui(饿了么 ui)是一个非常好用且美观的组件库(插件库)，主要用于网站快速成型，由国产团队饿了么团队开发的，不管是任何的 ui 组件库，都不需要死记硬背，需要使用的时候查阅官方文档即可，官方让怎么写，我们就怎么写即可，主要的工作就是复制粘贴，任何的组件库写法都是一样的大同小异的

官网：https://element.eleme.cn/#/zh-CN

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

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

点击组件即可跳到组件使用说明主页

安装 element-ui

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

打开终端，输入：

npm i element-ui

复制代码

引入 element-ui

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

完整引入 element-ui

在 main.js 里面引入 element-ui

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

复制代码

使用 element-ui 的元素

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

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

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

复制到代码里面

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

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

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

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

  <span class="demonstration">默认</span>      <el-date-picker        v-model="value1"        type="date"        placeholder="选择日期">      </el-date-picker>

复制代码

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