Element-ui 的全局引入和按需引入

在项目中我们通常需要使用到 Element- UI 这个组件库,想要随时在任意页面使用我们需要在全局引入,而且其中的组件并不全是都能被使用到,于是根据需要可以仅引入部分组件

以 Vue项目 为例
1、全局引入

在入口文件 main.js 中写,引入全部组件

	// 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)
	});

⚠️以上代码便完成了 Element 的引入。需要注意的是,样式文件需要单独引入。

2、按需引入

借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。首先,安装 babel-plugin-component:
npm install babel-plugin-component -D
然后,将 .babelrc (Vuecli3叫 babel.config.js)修改为:

	module.exports = {
	  presets: [
	    '@vue/app'
	  ],
	  plugins: [
	    [
	      'component',
	      {
	        libraryName: 'element-ui',
	        styleLibraryName: 'theme-chalk'
	      }
	    ]
	  ]
	}

接下来,如果你只希望全局引入部分组件,比如 Button 和 Select,那么需要在 main.js 中写入以下内容:

	import Vue from 'vue';
	import { Button, Select } from 'element-ui';
	import App from './App.vue';
	
	Vue.component(Button.name, Button);
	Vue.component(Select.name, Select);
	/* 或写为
	 * Vue.use(Button)
	 * Vue.use(Select)
	 */
	
	new Vue({
	  el: '#app',
	  render: h => h(App)
	});
3、全局配置

在引入 Element 时,可以传入一个全局配置对象。该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸,zIndex 设置弹框的初始 z-index(默认值:2000)。按照引入 Element 的方式,具体操作如下:

  • 完整引入 Element:
    	import Vue from 'vue';
    	import Element from 'element-ui';
    	Vue.use(Element, { size: 'small', zIndex: 3000 });
    
  • 按需引入 Element:
    import Vue from 'vue';
    import { Button } from 'element-ui';
    
    Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
    Vue.use(Button);
    

4、其他

完整组件列表和引入方式可以在官网查看
👉 Element 快速上手

  • 4
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值