当前位置:首页 > 前端教程

导入elementui

2026-03-05 18:29:48前端教程

安装 Element UI

通过 npm 或 yarn 安装 Element UI。确保项目已初始化并安装了 Vue.js。

npm install element-ui -S
# 或
yarn add element-ui

引入 Element UI

在 Vue 项目中完整引入 Element UI。修改 main.js 文件,添加以下代码:

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

按需引入(可选)

若需优化打包体积,可通过 babel-plugin-component 按需引入组件。先安装插件:

npm install babel-plugin-component -D
# 或
yarn add babel-plugin-component -D

修改 babel.config.js 文件,添加插件配置:

module.exports = {
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
};

之后在组件中按需引入,例如引入 ButtonSelect

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

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);

全局配置(可选)

在引入 Element UI 时,可传入全局配置对象,例如设置默认的 sizezIndex

Vue.use(ElementUI, { size: 'small', zIndex: 3000 });

使用组件

在 Vue 模板中直接使用 Element UI 组件:

<template>
  <el-button type="primary">按钮</el-button>
  <el-date-picker v-model="date"></el-date-picker>
</template>

主题定制(可选)

通过覆盖 SCSS 变量自定义主题。安装主题生成工具:

npm install element-theme -g
npm install element-theme-chalk -D

初始化变量文件并编译主题:

导入elementui

et -i
et

修改生成的 element-variables.scss 文件后重新编译。

标签: elementui
分享给朋友:

相关文章

elementui消息

elementui消息

ElementUI 消息提示 ElementUI 提供了一套消息提示组件,包括 Message、MessageBox 和 Notification,用于展示不同类型的反馈信息。 消息提示(Mes…

替代elementui

替代elementui

替代 ElementUI 的 UI 框架推荐 ElementUI 是基于 Vue 2.x 的组件库,若需替代方案,可考虑以下框架: Vue 2.x 兼容方案 1. Ant Design Vue…

elementui如何

elementui如何

ElementUI 基本使用 ElementUI 是一套基于 Vue.js 的桌面端组件库,提供丰富的 UI 组件和交互功能。以下是 ElementUI 的基本使用方法。 安装 ElementUI…

elementui formdata

elementui formdata

使用 ElementUI 上传文件时处理 FormData ElementUI 的 el-upload 组件常用于文件上传,结合 FormData 可以方便地处理文件数据。以下是实现方法: 创建 F…

springboot elementui

springboot elementui

Spring Boot 整合 Element UI 的方法 Spring Boot 是一个用于构建 Java 后端应用的框架,而 Element UI 是一个基于 Vue.js 的前端组件库。要将两者…

axure elementui

axure elementui

Axure 中使用 ElementUI 组件的方法 在 Axure 中模拟 ElementUI 组件可以通过以下方式实现: 下载 ElementUI 组件库 ElementUI 的 Axure 组件…