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 AJAX 用于计算点击率(统计)
Jun 30 Javascript
写自已的js类库需要的核心代码
Jul 16 Javascript
jquery ajax 简单范例(界面+后台)
Nov 19 Javascript
js函数在frame中的相互调用详解
Mar 03 Javascript
网页挂马方式整理及详细介绍
Nov 03 Javascript
javascript 中的try catch应用总结
Apr 01 Javascript
JQuery判断正整数整理小结
Aug 21 jQuery
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
Aug 09 Javascript
Angular自定义组件实现数据双向数据绑定的实例
Dec 11 Javascript
Vue实现导出excel表格功能
Mar 30 Javascript
详解vue-cli3 中跨域解决方案
Apr 10 Javascript
ES6 Object方法扩展的应用实例分析
Jun 25 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
PHP4实际应用经验篇(4)
2006/10/09 PHP
php下mysql数据库操作类(改自discuz)
2010/07/03 PHP
Codeigniter校验ip地址的方法
2015/03/21 PHP
PHP手机号码及邮箱正则表达式实例解析
2020/07/11 PHP
爱恋千雪-US-AscII加密解密工具(网页加密)下载
2007/06/06 Javascript
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
2010/03/18 Javascript
jquery.validate使用攻略 第一部
2010/07/01 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
2011/09/29 Javascript
动态标签 悬停效果 延迟加载示例代码
2013/11/21 Javascript
用JS在浏览器中创建下载文件
2014/03/05 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
JavaScript中具名函数的多种调用方式总结
2014/11/08 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
2015/08/07 Javascript
详解Angular调试技巧之报错404(not found)
2018/01/31 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
node 使用 async 控制并发的方法
2018/05/07 Javascript
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
[38:39]完美世界DOTA2联赛循环赛 IO vs GXR BO2第二场 11.04
2020/11/05 DOTA
python计算两个地址之间的距离方法
2018/06/09 Python
python读取有密码的zip压缩文件实例
2019/02/08 Python
flask/django 动态查询表结构相同表名不同数据的Model实现方法
2019/08/29 Python
Python操作dict时避免出现KeyError的几种解决方法
2020/09/20 Python
北美最大的手工艺品零售商之一:Michaels Stores
2019/02/27 全球购物
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
将相和教学反思
2014/02/04 职场文书
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
卖房协议书
2014/04/11 职场文书
十佳党员事迹材料
2014/08/28 职场文书
2015年校务公开工作总结
2015/05/26 职场文书
90行Python代码开发个人云盘应用
2021/04/20 Python
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技
springboot中的pom文件 project报错问题
2022/01/18 Java/Android
python数据分析之单因素分析线性拟合及地理编码
2022/06/25 Python