Element-UI在Vue中的使用（学习笔记）

最新推荐文章于 2025-05-08 19:00:00 发布

Gray_Song

最新推荐文章于 2025-05-08 19:00:00 发布

阅读量375

点赞数

CC 4.0 BY-SA版权

分类专栏：前端笔记文章标签：前端 Vue Element

本文链接：https://blog.youkuaiyun.com/qq_38702877/article/details/99618586

前端笔记专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何在 Vue 项目中安装并配置 Element UI，包括按需加载特定组件以优化性能的方法，以及如何进行全局配置来调整组件的默认尺寸和 z-index 属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装element-ui

	npm i element-ui -S

2.安装按需加载的组件

	npm install babel-plugin-component -D

3.修改 .babelrc

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

把不同点加上,(es2015====已有stage-2编译为ES5)

4.引入组件

在main.js中

import {Button,Tag} from 'element-ui';

Vue.component(Button.name, Button);
Vue.component(Tag.name, Tag);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Tag)
 */

在helloworld中使用：

<template>
  <div class="hello">
    <el-button icon="el-icon-search" circle></el-button>
    <el-button type="primary" icon="el-icon-edit" circle></el-button>
    <el-button type="success" icon="el-icon-check" circle></el-button>
    <el-button type="info" icon="el-icon-message" circle></el-button>
    <el-button type="warning" icon="el-icon-star-off" circle></el-button>
    <el-button type="danger" icon="el-icon-delete" circle></el-button>

    <el-tag>标签一</el-tag>
    <el-tag type="success">标签二</el-tag>
    <el-tag type="info">标签三</el-tag>
    <el-tag type="warning">标签四</el-tag>
    <el-tag type="danger">标签五</el-tag>
    
  </div>
</template>

效果图：
在这里插入图片描述
完整组件列表和引入方式可以到官网查看：
https://element.eleme.cn/2.11/#/zh-CN/component/quickstart

全局配置

在引入 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);

按照以上设置，项目中所有拥有 size 属性的组件的默认尺寸均为 ‘small’，弹框的初始 z-index 为 3000。