npm elementui
安装 Element UI
使用 npm 安装 Element UI 是最常见的方式。确保已经安装了 Node.js 和 npm,然后在项目目录下运行以下命令:
npm install element-ui -S
安装完成后,可以在项目中引入 Element UI。
引入 Element UI
在项目的入口文件(通常是 main.js 或 main.ts)中,引入 Element UI 并注册:
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 Vue from 'vue';
import { Button, Select } from 'element-ui';
Vue.use(Button);
Vue.use(Select);
全局配置
Element UI 提供了一些全局配置项,可以在引入时设置:
import Vue from 'vue';
import ElementUI from 'element-ui';
Vue.use(ElementUI, {
size: 'small',
zIndex: 3000
});
自定义主题
如果需要自定义主题,可以使用 Element UI 提供的主题生成工具。首先安装主题生成工具:
npm install element-theme -g
npm install element-theme-chalk -D
初始化变量文件:

et -i
修改生成的 element-variables.scss 文件,然后编译主题:
et
编译完成后,在项目中引入生成的主题文件:
import '../theme/index.css';
import ElementUI from 'element-ui';
import Vue from 'vue';
Vue.use(ElementUI);
使用组件
引入 Element UI 后,可以直接在模板中使用组件:
<template>
<el-button type="primary">按钮</el-button>
</template>
国际化
Element UI 支持国际化,可以根据需要设置语言:
import Vue from 'vue';
import ElementUI from 'element-ui';
import locale from 'element-ui/lib/locale/lang/en';
Vue.use(ElementUI, { locale });
常见问题
如果遇到样式问题,检查是否正确引入了 CSS 文件。如果按需引入无效,检查 babel 配置是否正确。确保项目的依赖版本兼容,避免版本冲突。






