Vue引入并使用Element组件库的两种方式小结

目录
  • 前言
  • Element-ui(饿了么ui)
  • 安装element-ui
  • 引入element-ui
    • 完整引入element-u
    • 按需引入element-ui
  • 总结

前言

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

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

Element-ui(饿了么ui)

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

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

官网:elementui官网文档

这里会提示不同的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-u

在main.js里面引入element-ui

// 引入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提供的按钮

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

复制到代码里面

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

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

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

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

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

直接拿来就用,这不香吗?

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

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

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

按需引入element-ui

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

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

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

接下来回到文档,安装文档说明进行操作

安装 babel-plugin-component

打开终端,输入:

npm install babel-plugin-component -D

修改.babelrc(babel.config.js)

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

引入需要的组件

解决报错

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

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

这时候又报错了

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

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

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

改过之后就解决了

再次访问页面发现样式还在,并且体积变小了

总结

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

到此这篇关于Vue引入并使用Element组件库的两种方式小结的文章就介绍到这了,更多相关Vue引入并使用Element组件库内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 7个适用于Vue 3的高颜值UI组件库

    目录 前言 Element Plus Ant Design Vue Naive UI VARLET NutUI Vant Arco Design 总结 前言 Vue 3.0 已经发布两年多的时间,今年 2 月 Vue 3.0 也正式成为新的默认版本.今天就来分享 7 个适用于 Vue 3 的高颜值 UI 组件库! Element Plus Element Plus 是一套由饿了么开源出品的为开发者.设计师和产品经理准备的基于 Vue 3.0 的组件库.Element Plus 使用 TypeSc

  • 对于组件库的思考及技术梳理详解

    目录 为什么要做? 组件库的技术选型 组件库的方向 组件库的设计 结语 为什么要做? 18年的时候觉得写ui组件库的人都好牛,出于好奇看了elementui.iview和Vant的源码.从那之后就萌生了自己也可以尝试搭个组件库试试,一是可以学习到很多知识,二是可以向牛人靠齐.可那时候又是个菜鸟,从0到1搭建对我来说是件很难的事情.当时借助从vue-cli创建的项目,做了修修改改,这样简单的组件库就出来了vvmui,现在回头看看那时候做的东西是真的菜... 近些年来,随着前端项目的复杂度越来越高,

  • Vue3组件库框架搭建example环境的详细教程

    目录 1 搭建 example 开发环境 1.1 创建 example 项目 1.2 修改 package.json 1.3 修改 vite 配置文件 1.4 多环境支持 1.5 测试启动服务 2 测试 foo 组件 2.1 安装依赖 2.2 引入组件库 2.3 使用组件 2.4 运行查看效果 3 example 打包构建 前面用了大量篇幅介绍组件库的开发环境搭建,包括:创建组件.创建组件库入口.组件库样式架构.组件库公共包,做了一大堆工作,还不能预览示例组件 foo,本文便搭建 example

  • Vue引入并使用Element组件库的两种方式小结

    目录 前言 Element-ui(饿了么ui) 安装element-ui 引入element-ui 完整引入element-u 按需引入element-ui 总结 前言 在开发的时候,虽然我们可以自己写css或者js甚至一些动画特效,但是也有很多开源的组件库帮我们写好了.我们只需要下载并引入即可. vue和element-ui在开发中是比较般配的,也是我们开发中用的很多的,下面就介绍下如何在eue项目中引入element-ui组件库 Element-ui(饿了么ui) element-ui(饿了

  • vue中兄弟组件传值的两种方式小结

    目录 一. bus总线传值的使用 二. 使用常规的传值:(子传父,父再传子) 总结 本demo主要是为了演示vue项目中兄弟组件之间的传值,这里我演示了两种方式: a. bus总线传值: b. 我自己一般把它当成常规的传值(其实也就是子组件A传父组件,父组件再传子组 件B) 下边开始本次demo的编写: 一. bus总线传值的使用 在项目中创建一个单独的eventBus.js文件 该js文件的内容很简单,就是暴露一个vue实例而已. 有人喜欢在main.js全局引入该js文件,我一般在需要使用到

  • vue data引入本地图片的两种方式小结

    我就废话不多说了,大家直接看吧! 第一种 <template> <img :src="imgsrc"> </template> <script> export default { data () { return { imgsrc: require('../../images/ICON-electronicbilling.png') } } } </script> 第二种 <template> <img :s

  • Vue 实现列表动态添加和删除的两种方法小结

    下面将介绍两种方式实现动态添加和删除列表 1.不使用组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - vue实现列表增加和删除</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script&g

  • SpringBoot原生组件注入实现两种方式介绍

    目录 一.使用 Servlet API 1.实现自定义 MyServlet 2.实现自定义 MyFilter 3.实现自定义 MyServletContextListener 二.使用 RegistrationBean 的方式注入原生组件 原生组件注入SpringBoot,即注册 Servlet .Filter.Listener 进入 SpringBoot 一.使用 Servlet API 使用 Servlet API 可以实现原生组件注入,通过在自定义 Servlet 前加入 @WebServ

  • vue中向data添加新属性的三种方式小结

    目录 向data添加新属性的三种方式 原理分析 三种方式 vue组件 data等属性介绍 向data添加新属性的三种方式 原理分析 首先在了解这三种方式之前,我觉的有必要说一下,为啥不能直接手动给data中的对象添加属性呢? 下面咱们一块分析下: vue2 是通过数据劫持 “Object.defineProperty” 实现数据响应式:     const obj = {};         let val = 'kk'         Object.defineProperty(obj,'na

  • vue组件创建的三种方式小结

    1.使用Vue.extend创建全局的Vue组件 //1.1 使用vue.extend创建组件 var com1 = Vue.extend({ //通过template属性指定组件要展示的html结构 template : "<h3>使用vue.extend创建的组件</h3>" }) //1.2使用Vue.component('组件名称',创建出来的组件模板对象) Vue.component('myCom1',com1) 把名称以标签的形式放到页面中<m

  • 通过两种方式增加从库——不停止mysql服务

    一般在线增加从库有两种方式,一种是通过mysqldump备份主库,恢复到从库,mysqldump是逻辑备份,数据量大时,备份速度会很慢,锁表的时间也会很长.另一种是通过xtrabackup工具备份主库,恢复到从库,xtrabackup是物理备份,备份速度快,不锁表.为什么不锁表?因为自身会监控主库日志,如果有更新的数据,就会先写到一个文件中,然后再回归到备份文件中,从而保持数据一致性. 现在生产环境MySQL数据库是一主一从,由于业务量访问不断增大,故再增加一台从库.前提是不能影响线上业务使用,

  • vue的安装及element组件的安装方法

    一.新建vue项目 1.首先需要下载nodejs,安装后打开命令窗口可以使用npm包管理工具 npm集成在node中的,所以直接输入npm-v查看npm的版本信息 2.npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像---cnpm. 3.在命令行中输入 npm install -g cnpm--registry=http://registry.npm.taobao.org然后等待安装完成,就可以使用cnpm安装依赖包了,这里说一下最好

  • Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法

    通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无限滚动加载不需要写首次载入列表的函数, 代码如下: html: //父组件 <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance=

随机推荐