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

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

{
  "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 变量覆盖默认主题。
安装主题生成工具:

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 插件,避免手动导入样式文件。

requres elementui

分享给朋友:

相关文章

elementui中文网

elementui中文网

Element UI 中文网相关信息 Element UI 是一款基于 Vue.js 的开源 UI 组件库,由饿了么前端团队开发和维护。以下是关于 Element UI 中文网的相关信息: 官方网站…

elementui获取input的值

elementui获取input的值

获取 input 值的常用方法 在 Element UI 中,可以通过 v-model 双向绑定或 ref 引用的方式获取 input 组件的值。 使用 v-model 双向绑定 <…

elementui table

elementui table

ElementUI Table 基本用法 ElementUI 的 Table 组件用于展示结构化数据,支持排序、筛选、分页等功能。以下是一个基础示例: <template> &…

elementui使用

elementui使用

安装 Element UI 通过 npm 或 yarn 安装 Element UI: npm install element-ui --save # 或 yarn add element-ui 在…

vue elementui

vue elementui

Vue 中使用 Element UI Element UI 是一套基于 Vue 2.0 的桌面端组件库,提供丰富的 UI 组件和交互功能。以下是如何在 Vue 项目中集成和使用 Element UI…

elementui组件

elementui组件

ElementUI 组件概述 ElementUI 是一套基于 Vue.js 的桌面端组件库,提供丰富的 UI 组件,适用于快速开发中后台系统。以下是其核心组件分类及典型用法。 基础组件 Butto…