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 相关文章推荐
javascript事件冒泡详解和捕获、阻止方法
Apr 12 Javascript
js上传图片及预览功能实例分析
Apr 24 Javascript
vue制作加载更多功能的正确打开方式
Oct 12 Javascript
使用Node.js给图片加水印的方法
Nov 15 Javascript
JS实现的DIV块来回滚动效果示例
Feb 07 Javascript
JS中IP地址与整数相互转换的实现代码
Apr 10 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
Nov 21 Javascript
详解Vue中localstorage和sessionstorage的使用
Dec 22 Javascript
详解如何在Vue里建立长按指令
Aug 20 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 Javascript
vue.js实现备忘录demo
Jun 26 Javascript
javascript实现固定侧边栏
Feb 09 Javascript
原生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
ajax 的post方法实例(带循环)
2011/07/04 PHP
利用PHP抓取百度阅读的方法示例
2016/12/18 PHP
ThinkPHP框架中使用Memcached缓存数据的方法
2018/03/31 PHP
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
js 静态动态成员 and 信息的封装和隐藏
2011/05/29 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
2014/06/05 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
2015/06/04 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
2016/09/08 Javascript
JavaScript 栈的详解及实例代码
2017/01/22 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
NodeJS创建最简单的HTTP服务器
2017/05/15 NodeJs
写给新手同学的vuex快速上手指北小结
2020/04/14 Javascript
vue模块移动组件的实现示例
2020/05/20 Javascript
[27:02]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第三场
2014/05/24 DOTA
python循环监控远程端口的方法
2015/03/14 Python
Python对象转JSON字符串的方法
2016/04/27 Python
Python程序中的观察者模式结构编写示例
2016/05/27 Python
Python爬虫实例扒取2345天气预报
2018/03/04 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
pycharm远程开发项目的实现步骤
2019/01/20 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
python 创建一维的0向量实例
2019/12/02 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
Python docutils文档编译过程方法解析
2020/06/23 Python
python处理写入数据代码讲解
2020/10/22 Python
全球度假村:Club Med
2017/11/27 全球购物
屈臣氏俄罗斯在线商店:Watsons俄罗斯
2020/08/03 全球购物
南京某公司笔试题
2013/01/27 面试题
高中军训感想300字
2014/03/04 职场文书
对标管理实施方案
2014/03/12 职场文书
不听老师话的万能检讨书
2014/10/04 职场文书
工作态度恶劣检讨书
2015/05/06 职场文书
跑出一片天观后感
2015/06/08 职场文书
基于Redis的List实现特价商品列表功能
2021/08/30 Redis