elementui教学
安装 Element UI
Element UI 是一个基于 Vue.js 的组件库，安装需要先确保项目中已集成 Vue.js。通过 npm 或 yarn 安装 Element UI：
npm install element-ui --save
# 或
yarn add element-ui引入 Element UI
在项目中全局引入 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 插件：
import { Button, Select } from 'element-ui';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);基础组件使用
以按钮和表单为例，演示基础组件的使用方法：
<template>
<div>
<el-button type="primary">主要按钮</el-button>
<el-form :model="form" label-width="80px">
<el-form-item label="用户名">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: { name: '' }
};
}
};
</script>主题定制
Element UI 支持通过 SCSS 变量覆盖实现主题定制。在项目中创建样式文件（如 element-variables.scss）：
$--color-primary: #ff4500; /* 修改主题色 */
@import "~element-ui/packages/theme-chalk/src/index";在入口文件中引入该文件：
import './element-variables.scss';国际化配置
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 库冲突，可尝试在组件外层添加命名空间或使用 scoped 样式：
<style scoped>
.el-button { margin-right: 10px; }
</style>按需引入报错
确保已安装 babel-plugin-component 并在 babel.config.js 中配置：
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
