引入elementui
安装 Element UI
Element UI 可以通过 npm 或 yarn 安装。在项目根目录下运行以下命令：
npm install element-ui --save
# 或
yarn add element-ui引入 Element UI
在 Vue 项目中，可以通过全局引入或按需引入的方式使用 Element UI。
全局引入
在项目的入口文件（如 main.js）中引入 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
# 或
yarn add babel-plugin-component --dev在 babel.config.js 或 .babelrc 中配置插件：
{
"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 组件
引入后，可以直接在模板中使用 Element UI 的组件：
<template>
<el-button type="primary">按钮</el-button>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [
{ value: '选项1', label: '选项1' },
{ value: '选项2', label: '选项2' }
],
value: ''
};
}
};
</script>主题定制
如果需要自定义主题，可以使用 Element UI 提供的主题工具。首先安装主题生成工具：
npm install element-theme -g
npm install element-theme-chalk -D初始化变量文件：
et --init修改生成的 element-variables.scss 文件后，编译主题：
et最后在项目中引入编译后的主题文件：
import '../theme/index.css';国际化
Element UI 支持国际化，可以通过引入 locale 文件实现：
import Vue from 'vue';
import ElementUI from 'element-ui';
import locale from 'element-ui/lib/locale/lang/en';
Vue.use(ElementUI, { locale });注意事项
- 确保 Vue 版本兼容性，Element UI 2.x 支持 Vue 2.x。
- 按需引入时，确保 Babel 配置正确，避免样式丢失。
- 主题定制需要额外工具支持，建议参考官方文档操作。
