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

相关推荐
眠りたいです13 小时前
基于脚手架微服务的视频点播系统-数据管理与网络通信部分的预备工作
c++·qt·ui·微服务·云原生·架构·媒体
油炸自行车2 天前
【Qt】编写Qt自定义Ui控件步骤
开发语言·c++·qt·ui·自定义ui控件·qt4 自定义ui控件
IT古董2 天前
Vue + Vite + Element UI 实现动态主题切换:基于 :root + SCSS 变量的最佳实践
vue.js·ui·scss
yuanpan4 天前
认识跨平台UI框架Flutter和MAUI区别,如何选。
flutter·ui·maui
EndingCoder4 天前
Electron 高级 UI:集成 React 或 Vue.js
react.js·ui·electron·前端框架
我命由我123454 天前
Word - Word 的 5 种视图(页面视图、阅读视图、Web 版式视图、大纲视图、草稿视图)
ui·word·excel·photoshop·表格·ps·美工
CodingCos4 天前
【芯片设计-信号完整性 SI 学习 1.1.1 -- Unit Interval,比特周期】
学习·ui·si 比特周期
开开心心loky4 天前
[iOS] ViewController 的生命周期
macos·ui·ios·objective-c·cocoa
我命由我123455 天前
Excel 表格 - Excel 减少干扰、专注于内容的查看方式
学习·ui·excel·photoshop·表格·ps·美工
我命由我123455 天前
Excel 表格 - Excel 单元格添加边框
学习·ui·excel·课程设计·photoshop·ps·美工