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设计和前端开发人才12 小时前
UI前端与数字孪生结合案例分享:智慧城市的智慧能源管理系统
前端·ui·智慧城市
甜甜不吃芥末1 天前
Windows 应用程序的 UI 框架:WPF、WinUI 3 和 UWP的差异区别
windows·ui·wpf
共享ui设计和前端开发人才1 天前
UI前端大数据可视化实战技巧:如何利用数据故事化提升用户参与度?
ui
蒙小萌19931 天前
苹果UI 设计
macos·ui·cocoa
界面开发小八哥1 天前
界面组件DevExpress WPF中文教程:Grid - 如何检查节点?
ui·.net·wpf·界面控件·devexpress·ui开发
UI罐头2 天前
后台设计指南:系统架构、交互规范与工具实战全流程解析
ui·设计·设计工具
UI前端开发工作室2 天前
UI前端与数字孪生融合新领域拓展:智慧教育的虚拟实验室建设
ui
前端开发与ui设计的老司机2 天前
从数据洞察到设计变革:UI前端如何利用数字孪生重塑用户体验?
ui·ux
前端开发与ui设计的老司机3 天前
大数据时代UI前端的智能化升级:基于机器学习的用户意图预测
大数据·ui
前端开发与ui设计的老司机3 天前
从UI设计到数字孪生实战:构建智慧教育的个性化学习平台
学习·ui