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文件夹的大小决定用户初次请求网页时加载的时间

相关推荐
ui设计前端开发老司机3 小时前
数字孪生技术为UI前端提供全面支持:实现产品的可视化配置与定制
ui
X_StarX4 小时前
【Unity笔记01】基于单例模式的简单UI框架
笔记·ui·unity·单例模式·游戏引擎·游戏开发·大学生
Clair-Sean14 小时前
【交互设计】UI 与 UX 简介:从核心概念到行业实践
ui·ux
Zevalin爱灰灰1 天前
MATLAB GUI界面设计 第六章——常用库中的其它组件
开发语言·ui·matlab
前端开发与ui设计的老司机1 天前
数字孪生技术引领UI前端设计潮流:增强现实(AR)的集成应用
ui
前端开发与ui设计的老司机1 天前
数字孪生技术为UI前端注入灵魂:实现产品全生命周期的可视化管理
前端·ui·命令模式
共享ui设计和前端开发人才1 天前
UI前端与数字孪生结合探索:智慧建筑的能耗管理与优化
前端·ui·状态模式
切韵11 天前
Unity编辑器扩展:UI绑定复制工具
ui·unity·编辑器
冰茶_11 天前
ASP.NET Core API文档与测试实战指南
后端·学习·http·ui·c#·asp.net
Zevalin爱灰灰11 天前
MATLAB GUI界面设计 第三章——仪器组件
开发语言·ui·matlab