element-ui中按需引入的实现


Posted in Javascript onDecember 25, 2019

element-ui中按需引入

为什么选择 element-ui 而不是 iview

因为在多次使用两个组件的过程中慢慢发现,iview 的一些组件还是需要再完善,而 element-ui 现在更加的成熟

所以, 这里我们一起来学习一下在 vue 中按需引入 element-ui 一些组件中的坑(Dialog组件)

这里我们使用的版本是 element-ui : 2.4.7,vue: 2.2.2

1、按需引入

1. 借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的:

npm install babel-plugin-component -D

2. 更改.babelrc文件

"plugins": [
  [
   "component",
   {
    "libraryName": "element-ui",
    "styleLibraryName": "theme-chalk"
   }
  ]
 ]

当然这里如果有其他的配置,只需要在 plugins 的数组中继续添加我们需要的配置代码就行了

2、 我们将按需引入的代码单独分割一下

1. 在 src 文件夹中新建我们的 element 文件夹,并在里面新建一个 index.js 文件

element-ui中按需引入的实现

2. 在index文件中去书写我们需要引入的部分组件

// 导入自己需要的组件
import { Select, Option, OptionGroup, Input, Tree, Dialog, Row, Col } from 'element-ui'
const element = {
 install: function (Vue) {
  Vue.use(Select)
  Vue.use(Option)
  Vue.use(OptionGroup)
  Vue.use(Input)
  Vue.use(Tree)
  Vue.use(Dialog)
  Vue.use(Row)
  Vue.use(Col)
 }
}
export default element

这里要使用 Select 组件,必须同时使用 OptionOptionGroup
这里的 install 方法表示在 main.js 中,如果使用 Vue.use() 方法的话,则该方法默认会调用 install 方法

3. 在 main.js 中使用该文件,就大功告成了

// css样式还是需要全部引入
	import 'element-ui/lib/theme-chalk/index.css'
	import element from './element/index'
	Vue.use(element)

3、为什么要使用 单独分割的方式去按需加载

1. 我们使用常规的方式再来加载一次在 main.js 文件中 直接使用

import 'element-ui/lib/theme-chalk/index.css'
import { Dialog, Select, Option, OptionGroup, Input, Tree, Row, Col } from 'element-ui'
Vue.use(Select)
Vue.use(Option)
Vue.use(OptionGroup)
Vue.use(Input)
Vue.use(Tree)
Vue.use(Dialog)
Vue.use(Row)
Vue.use(Col)

不好意思,现在就报错了

element-ui中按需引入的实现

我们在 element-ui 的源码中可以看到,的确使用的是 Dialog,但是我们在运行的时候还是报错了

element-ui中按需引入的实现

2. 我们将引入的 Dialog 做一些修改,如下图

element-ui中按需引入的实现

可以看到,我们现在改成小写,项目是可以正常运行的,应该是不是 element-ui 的一些小失误吧,这样的写法会将我们的 main.js 文件变得很大很复杂,所以我们建议是 使用第一中方式来按需加载 element-ui 的一些组件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery隔行变色与普通JS写法的对比
Apr 21 Javascript
JS 去前后空格大全(IE9亲测)
Jul 15 Javascript
遍历DOM对象内的元素属性示例代码
Feb 08 Javascript
js实现的后台左侧管理菜单代码
Sep 11 Javascript
JavaScript几种数组去掉重复值的方法推荐
Apr 12 Javascript
JavaScript判断用户名和密码不能为空的实现代码
May 16 Javascript
javascript中异常处理案例(推荐)
Oct 03 Javascript
解析jQueryEasyUI的使用
Nov 22 Javascript
js实现密码强度检验
Jan 15 Javascript
JavaScript使用FileReader实现图片上传预览效果
Mar 27 Javascript
javascript按顺序加载运行js方法
Dec 01 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
原生JS实现顶部导航栏显示按钮+搜索框功能
Dec 25 #Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 #jQuery
解决Vue 刷新页面导航显示高亮位置不对问题
Dec 25 #Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
Dec 25 #Javascript
如何基于JS截获动态代码
Dec 25 #Javascript
通过微信公众平台获取公众号文章的方法示例
Dec 25 #Javascript
vue远程加载sfc组件思路详解
Dec 25 #Javascript
You might like
PHP编程函数安全篇
2013/01/08 PHP
php获取服务器信息的实现代码
2013/02/04 PHP
判断php数组是否为索引数组的实现方法
2013/06/13 PHP
php MessagePack介绍
2013/10/06 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
PHP实现批量生成App各种尺寸Logo
2015/03/19 PHP
比较详细的javascript对象的property和prototype是什么一种关系
2007/08/06 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
IE事件对象(The Internet Explorer Event Object)
2012/06/27 Javascript
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
JS格式化数字保留两位小数点示例代码
2013/10/15 Javascript
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
jQuery实现宽屏图片轮播实例教程
2015/11/24 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
Javascript刷新页面的实例
2017/09/23 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
2018/01/23 Javascript
jQuery表单元素过滤选择器用法实例分析
2019/02/20 jQuery
微信小程序new Date()方法失效问题解决方法
2019/07/29 Javascript
使用axios请求接口,几种content-type的区别详解
2019/10/29 Javascript
vue请求服务器数据后绑定不上的解决方法
2019/10/30 Javascript
python使用PIL模块实现给图片打水印的方法
2015/05/22 Python
在Django的视图中使用数据库查询的方法
2015/07/16 Python
利用numpy+matplotlib绘图的基本操作教程
2017/05/03 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
利用python实现汉字转拼音的2种方法
2019/08/12 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
《囚绿记》教学反思
2014/03/01 职场文书
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
2014教师个人自我评价范文
2014/09/13 职场文书
授权委托书
2014/09/17 职场文书
大学生党员个人对照检查材料范文
2014/09/25 职场文书
政府会议通知范文
2015/04/15 职场文书
反腐倡廉心得体会2016
2016/01/13 职场文书
基于MySql验证的vsftpd虚拟用户
2021/11/07 MySQL