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

requres elementui

2026-01-16 16:40:01前端教程

安装 Element UI

通过 npm 或 yarn 安装 Element UI 到项目中。

npm install element-ui --save
# 或
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

配置 .babelrcbabel.config.js

requres elementui

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

按需引入组件示例:

import { Button, Select } from 'element-ui';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);

使用组件

在 Vue 单文件组件中直接使用 Element UI 提供的组件。

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

主题定制(可选)

通过修改 SCSS 变量覆盖默认主题。
安装主题生成工具:

requres elementui

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

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

et -i
et

在项目中引用生成的主题文件:

import '../theme/index.css';

国际化支持

若需切换语言,引入对应的语言包并配置。

import Vue from 'vue';
import ElementUI from 'element-ui';
import locale from 'element-ui/lib/locale/lang/en';

Vue.use(ElementUI, { locale });

注意事项

  • 确保项目已安装 Vue 2.x,Element UI 不兼容 Vue 3。
  • 完整引入时注意 CSS 文件路径是否正确。
  • 按需引入需配合 Babel 插件,避免手动导入样式文件。

分享给朋友:

相关文章

selectable elementui

selectable elementui

使 ElementUI 组件可选中 ElementUI 默认情况下没有直接提供 selectable 功能的组件,但可以通过以下方法实现可选中效果。 使用 el-checkbox 实现单个选中 通过…

elementui treegrid

elementui treegrid

ElementUI TreeGrid 实现方法 ElementUI 本身并未直接提供 TreeGrid 组件,但可以通过组合 Tree 和 Table 组件或使用第三方扩展库实现类似功能。以下是几种实…

elementui核心

elementui核心

Element UI 核心概念 Element UI 是基于 Vue.js 2.0 的桌面端组件库,其核心设计理念是简洁、高效、易用。以下是其核心组成部分: 组件化设计 提供丰富的 UI 组件,如…

elementui文本

elementui文本

ElementUI 文本组件 ElementUI 提供了多种文本相关的组件,用于展示和处理文本内容。以下是一些常用的文本组件及其用法: 文本展示组件 el-text 用于展示普通文本,支持自定义样式…

elementui datepick

elementui datepick

ElementUI DatePicker 使用指南 ElementUI 是一套基于 Vue.js 的组件库,DatePicker 是其中一个常用的日期选择组件。以下是关于 ElementUI Date…

elementui时区

elementui时区

ElementUI 时区问题解决方案 ElementUI 本身是一个基于 Vue.js 的组件库,不直接处理时区问题。但日期时间相关组件(如 DatePicker、DateTimePicker)可能涉…