搭建elementui
安装Element UI
Element UI是一个基于Vue.js的组件库，适用于快速开发前端界面。在Vue项目中安装Element UI需要确保项目已初始化并安装了Vue.js。
使用npm安装Element UI：
npm install element-ui -S或者使用yarn安装：
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';
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修改.babelrc文件：
{
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}在需要的地方单独引入组件：
import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
new Vue({
el: '#app',
render: h => h(App)
});使用Element UI组件
引入Element UI后，可以直接在Vue组件中使用其提供的UI组件。例如，使用按钮和表格组件：
<template>
<div>
<el-button type="primary">主要按钮</el-button>
<el-table :data="tableData">
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ date: '2023-01-01', name: '张三' },
{ date: '2023-01-02', name: '李四' }
]
};
}
};
</script>定制主题
Element UI支持主题定制，可以通过修改变量或使用在线主题生成工具实现。
安装主题工具：
npm install element-theme -g
npm install element-theme-chalk -D初始化变量文件：
et -i编译主题：
et在项目中引用生成的主题文件：
import '../theme/index.css';
import ElementUI from 'element-ui';
Vue.use(ElementUI);国际化支持
Element UI默认支持中文，如需其他语言，可以引入对应的语言包并配置。
引入英文语言包：
import Vue from 'vue';
import ElementUI from 'element-ui';
import locale from 'element-ui/lib/locale/lang/en';
Vue.use(ElementUI, { locale });动态切换语言：
this.$i18n.locale = 'en';
const locale = require('element-ui/lib/locale/lang/en');
ELEMENT.locale(locale);
