elementUI全局引入改为局部引入

版本说明:

Vue版本:@vue/cli 4.4.6

webpack版本:4.41.1

node版本:v11.12.0

项目需要优化首页加载速度,所以需要把全局引入改为局部引入,百度加上自己的摸索,最后修改成功,记录一下,希望能够对别人有点启发:

1、安装 babel-plugin-component:

npm install babel-plugin-component -D

2、创建一个文件,里面是我们需要的组件

import {
  Link,
  Divider,
} from 'element-ui'
const element = {
  install: function(Vue) {
    Vue.use(Link);
    Vue.use(Divider);
  }
}
export default element

3、在main.js中把该文件引入

import element from './elementPartUI'
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(element)

4、修改babel.config.js

百度很多资料都是直接修改.babel文件,但是项目中并没有该文件,我还尝试手动创建该文件,但是项目报错,此路不通。

至此,成功转为局部引入。。。

但是我发现有一个babel.config.js文件,于是乎上网百度发现修改该文件也可以配置局部引入,粘上代码:

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

但是babel.config.js文件和 .babel文件到底有什么区别呢?

Babel 有两种并行的配置文件格式,可以一起使用,也可以分开使用。

  1. 项目范围的配置

babel.config.js 文件,具有不同的拓展名(json、js、html)

babel.config.js 是按照 commonjs 导出对象,可以写js的逻辑。

  1. 相对文件的配置

.babelrc 文件,具有不同的拓展名

总结:baberc 的加载规则是按目录加载的,是只针对自己的代码。config的配置针对了第三方的组件和自己的代码内容。babel.config.js 是一个项目级别的配置,一般有了babel.config.js 就不会在去执行.babelrc的设置。

中文文档链接https://www.babeljs.cn/

注意: .babelrc 和 .babel.config.js

两个文件都是es6语法编译配置,用来将es6代码转换成浏览器能够识别的es5代码。

<meta charset="utf-8">

<meta charset="utf-8">

image.png

Babel的配置文件就是.babelrc,存放在根目录下。使用Babel的第一步,就是配置这个文件。

该文件是用来设置转码规则和插件的 :

  1. {
  2. "presets":[],
  3. "plugins":[]
  4. }

presets 字段设定转码规则,官方提供,根据需要安装。

image.png

然后,将这些规则加入 .babelrc中。

image.png

当按需加载组件的时候,babel-plugin-component 。如果两个文件同时配置,并没有生效。原因就是配置无法合并,

导致文件无效。解决办法:把配置放入同一个文件,删除另一个,只保留.babelrc就可以了。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,591评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,448评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,823评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,204评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,228评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,190评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,078评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,923评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,334评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,550评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,727评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,428评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,022评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,672评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,826评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,734评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,619评论 2 354

推荐阅读更多精彩内容