requres elementui
安装 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
配置 .babelrc 或 babel.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 插件,避免手动导入样式文件。







