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

相关推荐
界面开发小八哥12 小时前
界面开发框架DevExpress XAF实践:集成.NET Aspire后如何实现数据库依赖?
ui·.net·界面控件·devexpress·ui开发·xaf
Humbunklung1 天前
Rust Floem UI 框架使用简介
开发语言·ui·rust
CodeCraft Studio2 天前
【案例分享】如何借助JS UI组件库DHTMLX Suite构建高效物联网IIoT平台
javascript·物联网·ui
插件开发2 天前
免费插件集-illustrator插件-Ai插件-随机填色
ui·illustrator
叹一曲当时只道是寻常2 天前
AI书签管理工具开发全记录(十三):TUI基本框架搭建
ui·go
海尔辛3 天前
Unity UI 性能优化--Sprite 篇
ui·unity·性能优化
QQ676580083 天前
基于 PyTorch 的 VGG16 深度学习人脸识别检测系统的实现+ui界面
人工智能·pytorch·python·深度学习·ui·人脸识别
pop_xiaoli3 天前
UI学习—cell的复用和自定义cell
学习·ui·ios
测试老哥4 天前
Pytest+Selenium UI自动化测试实战实例
自动化测试·软件测试·python·selenium·测试工具·ui·pytest
步、步、为营4 天前
.net jwt实现
ui·.net