入门elementui
安装 Element UI
Element UI 可以通过 npm 或 yarn 安装。在项目根目录下运行以下命令：
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';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});按需引入：
使用 babel-plugin-component 插件按需引入组件。安装插件：
npm install babel-plugin-component -D在 babel.config.js 中配置：
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
plugins: [
[
'component',
{
libraryName: 'element-ui',
styleLibraryName: 'theme-chalk'
}
]
]
};然后在需要使用的地方单独引入组件：
import { Button, Select } from 'element-ui';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);使用 Element UI 组件
引入 Element UI 后，可以直接在模板中使用其组件。例如，使用按钮组件：
<el-button type="primary">主要按钮</el-button>主题定制
Element UI 支持主题定制。可以通过修改 SCSS 变量或使用在线主题生成器实现。
修改 SCSS 变量：
在项目中新建一个 SCSS 文件（如 element-variables.scss）：
$--color-primary: #ff4500;
@import "~element-ui/packages/theme-chalk/src/index";然后在 main.js 中引入该文件：
import './element-variables.scss';在线主题生成器： 访问 Element UI 主题生成器，下载生成的主题文件并引入项目。
国际化支持
Element UI 默认支持中文，如需切换为其他语言，可以在 main.js 中配置：
import Vue from 'vue';
import ElementUI from 'element-ui';
import locale from 'element-ui/lib/locale/lang/en';
Vue.use(ElementUI, { locale });常用组件示例
表格组件：
<el-table :data="tableData">
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
</el-table>数据：
data() {
return {
tableData: [
{ date: '2023-01-01', name: '张三' },
{ date: '2023-01-02', name: '李四' }
]
};
}表单组件：
<el-form :model="form" label-width="80px">
<el-form-item label="活动名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">提交</el-button>
</el-form-item>
</el-form>数据和方法：
data() {
return {
form: { name: '' }
};
},
methods: {
onSubmit() {
console.log(this.form);
}
}注意事项
- Element UI 基于 Vue 2.x，如需在 Vue 3.x 中使用，请选择 Element Plus。
- 按需引入时，确保
babel-plugin-component配置正确，避免样式丢失。 - 主题定制时，注意变量命名和引入顺序，确保覆盖默认样式。
