elementui搭建
安装 Element UI
通过 npm 安装 Element UI 是推荐的方式。在项目根目录下运行以下命令：
npm install element-ui --save引入 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';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
render: h => h(App),
}).$mount('#app');按需引入组件（可选）
如果项目对体积敏感，可以通过 babel-plugin-component 按需引入组件。首先安装插件：
npm install babel-plugin-component -D在 babel.config.js 中配置插件：
module.exports = {
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
};之后在需要的地方单独引入组件：
import { Button, Select } from 'element-ui';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);使用组件
在 Vue 单文件组件中直接使用 Element UI 的组件：
<template>
<el-button type="primary">按钮</el-button>
<el-date-picker v-model="date"></el-date-picker>
</template>
<script>
export default {
data() {
return {
date: ''
};
}
};
</script>主题定制
如果需要自定义主题，可以使用官方主题生成工具。首先安装主题生成工具：
npm i element-theme -g
npm i element-theme-chalk -D初始化变量文件并编译主题：
et -i
et在项目中引用编译后的主题文件：
import '../theme/index.css';国际化支持
Element UI 默认支持中文，如需其他语言可以按需引入：
import Vue from 'vue';
import ElementUI from 'element-ui';
import locale from 'element-ui/lib/locale/lang/en';
Vue.use(ElementUI, { locale });与 Vue CLI 项目集成
在 Vue CLI 创建的项目中，可以通过 vue add 命令快速集成 Element UI：
vue add element按照提示选择完整引入或按需引入即可完成配置。
常见问题解决
样式未生效时检查是否引入了 CSS 文件。组件未注册时确认是否正确调用了 Vue.use() 或单独注册了组件。按需引入无效时检查 babel 配置是否正确。
