elementui创建
使用 Vue CLI 创建 Element UI 项目
安装 Vue CLI 工具（如未安装）：
npm install -g @vue/cli创建 Vue 项目：
vue create my-element-project进入项目目录并安装 Element UI：
cd my-element-project
npm install element-ui -S配置 Element UI
在 main.js 中全局引入 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 插件：
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.use(Button);
Vue.use(Select);自定义主题
安装主题生成工具：
npm install element-theme -g
npm install element-theme-chalk -D初始化变量文件：
et -i编译主题：
et修改 main.js 引用路径：
import '../theme/index.css';示例组件使用
在 .vue 文件中使用 Element UI 组件：
<template>
<div>
<el-button type="primary">主要按钮</el-button>
<el-date-picker v-model="date"></el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
date: ''
}
}
}
</script>项目结构建议
典型 Element UI 项目结构：
src/
├── assets/
├── components/
├── views/
├── App.vue
├── main.js
├── router.js
└── store.js注意事项
Element UI 默认依赖 Vue 2.x 版本，Vue 3 项目需要使用 Element Plus。
中文文档建议查看官方最新文档获取完整组件 API 和示例。
全局引入方式会增加打包体积，生产环境建议使用按需引入。
主题色修改可通过修改变量文件后重新编译实现。
