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

最新推荐文章于 2025-05-09 13:56:32 发布

芝芝葡萄

最新推荐文章于 2025-05-09 13:56:32 发布

阅读量7.1k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue elementui css

本文链接：https://blog.csdn.net/qq_41064597/article/details/118103668

Vue 专栏收录该内容

4 篇文章

订阅专栏

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