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

导入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

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

et -i
et

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

导入elementui

标签: elementui
分享给朋友:

相关文章

修改elementui的样式

修改elementui的样式

修改 ElementUI 样式的方法 通过全局样式覆盖 在项目的全局样式文件(如 App.vue 或 main.css)中直接覆盖 ElementUI 的默认样式。需确保选择器优先级高于默认样式,可通…

elementui面板

elementui面板

ElementUI 面板组件 ElementUI 提供了 el-collapse 和 el-collapse-item 组件来实现面板(折叠面板)功能。以下是如何使用这些组件的详细说明: 安装 E…

elementui navmenu

elementui navmenu

使用 ElementUI NavMenu 导航菜单 ElementUI 的 NavMenu 组件提供了一种简单的方式来实现网站或应用的导航菜单。以下是关于如何使用和配置 NavMenu 的详细说明。…

elementui抽屉

elementui抽屉

elementui抽屉的基本用法 Element UI的抽屉组件(Drawer)是一种从页面边缘滑出的面板,常用于显示额外内容或操作。需要在项目中引入Element UI库后使用。 安装Elemen…

elementui案例

elementui案例

Element UI 案例 Element UI 是一个基于 Vue.js 的组件库,广泛用于构建企业级中后台前端界面。以下是一些常见的 Element UI 案例和使用场景: 表单设计 Elem…

elementui渐变

elementui渐变

实现ElementUI渐变效果的方法 ElementUI组件库本身不直接提供渐变样式,但可以通过CSS自定义实现渐变效果。以下是几种常见实现方式: 背景渐变 通过CSS的linear-gradien…