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 相关文章推荐
关闭页面时window.location事件未执行的原因分析及解决方案
Sep 01 Javascript
60个很实用的jQuery代码开发技巧收集
Dec 15 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
Dec 18 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
javascript 实现动态侧边栏实例详解
Nov 11 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
Jan 13 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
Sep 19 Javascript
初学者AngularJS的环境搭建过程
Oct 27 Javascript
vue  自定义组件实现通讯录功能
Sep 30 Javascript
vue双向绑定及观察者模式详解
Mar 19 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
May 27 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
php+highchats生成动态统计图
2014/05/21 PHP
ThinkPHP无限级分类原理实现留言与回复功能实例
2014/10/31 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
javascript学习笔记(五) Array 数组类型介绍
2012/06/19 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
2013/11/01 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
Web打印解决方案之普通报表打印功能
2016/08/29 Javascript
javascript删除html标签函数cIsHTML
2017/01/09 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
vue实现多级菜单效果
2019/10/19 Javascript
js刷新页面location.reload()用法详解
2019/12/09 Javascript
Vue如何获取数据列表展示
2019/12/11 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
Python中的True,False条件判断实例分析
2015/01/12 Python
浅谈python 四种数值类型(int,long,float,complex)
2016/06/08 Python
python requests 测试代理ip是否生效
2018/07/25 Python
python接口自动化(十六)--参数关联接口后传(详解)
2019/04/16 Python
python print出共轭复数的方法详解
2019/06/25 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
pycharm无法导入本地模块的解决方式
2020/02/12 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
营销与策划个人求职信
2013/09/22 职场文书
工作的心得体会
2013/12/31 职场文书
初中校园广播稿
2014/02/02 职场文书
党组织公开承诺书
2014/03/29 职场文书
幼儿园小班评语大全
2014/04/17 职场文书
竞选副班长演讲稿
2014/04/24 职场文书
个人剖析材料范文
2014/09/30 职场文书
小学生光盘行动倡议书
2015/04/28 职场文书
黄埔军校观后感
2015/06/10 职场文书
mysql中varchar类型的日期进行比较、排序等操作的实现
2021/11/17 MySQL
Nginx动静分离配置实现与说明
2022/04/07 Servers