element-ui全局导入与按需引入

全局引入

npm i element-ui -S

安装好depencencies里面可以看到安装的element-ui版本

然后

在 main.js 中写入以下内容:

复制代码
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

重点是两个import与一个use

这样就可以全局引入

按需引入

npm install babel-plugin-component -D

接着在babel.config.js文件内修改,最终文档:

module.exports = {

presets: [

'@vue/cli-plugin-babel/preset',

"@babel/preset-env", { "modules": false }

],

"plugins": [

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

]

}

接着main.js按需引入

import {Icon,Button} from 'element-ui';

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

Vue.use(Icon);

Vue.use(Button);

具体import+use使用的元素

到此完成

区别

比如简单地使用后,全局引入npm run build打包得到了2.76mb的dist文件夹,按需引入只有900kb

dist文件夹的大小决定用户初次请求网页时加载的时间

相关推荐
开开心心loky14 小时前
[iOS] push 和 present Controller 的区别
ui·ios·objective-c·cocoa
眠りたいです14 小时前
基于脚手架微服务的视频点播系统-播放控制部分
c++·qt·ui·微服务·云原生·架构·播放器
我命由我123451 天前
Photoshop - Photoshop 创建文档
学习·ui·课程设计·设计·photoshop·ps·美工
六月的可乐1 天前
【干货推荐】AI助理前端UI组件-悬浮球组件
前端·人工智能·ui
我命由我123452 天前
Photoshop - Photoshop 创建图层蒙版
运维·学习·ui·课程设计·设计·ps·美工
江拥羡橙3 天前
【目录-单选】鸿蒙HarmonyOS开发者基础
前端·ui·华为·typescript·harmonyos
江拥羡橙3 天前
【目录-多选】鸿蒙HarmonyOS开发者基础
前端·ui·华为·typescript·harmonyos
XXYBMOOO4 天前
Qt UDP 通信类详解与实现
开发语言·网络·c++·qt·网络协议·ui·udp
摘星编程4 天前
Cursor Pair Programming:在前端项目里用 AI 快速迭代 UI 组件
前端·人工智能·ui·typescript·前端开发·cursorai
安卓开发者4 天前
鸿蒙Next的UI国际化与无障碍适老化实践:构建全球包容的数字世界
ui·华为·harmonyos