博客

在项目中我们通常需要使用到 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 快速上手