添加elementui
安装 Element UI
通过 npm 或 yarn 安装 Element UI：
npm install element-ui --save
# 或
yarn add element-ui引入 Element UI
在 Vue 项目中全局引入 Element UI（推荐在 main.js 或 main.ts 中配置）：
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);按需引入（可选）
如果希望减小打包体积，可以配合 babel-plugin-component 按需引入组件：
- 安装插件：
npm install babel-plugin-component -D- 修改
babel.config.js（或.babelrc）：
module.exports = {
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
};- 在代码中按需引入组件（示例引入
Button和Select）：
import { Button, Select } from 'element-ui';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);使用 Element UI 组件
在 Vue 单文件组件中直接使用 Element UI 提供的组件：
<template>
<el-button type="primary">按钮</el-button>
<el-select v-model="value" placeholder="请选择">
<el-option label="选项1" value="1"></el-option>
<el-option label="选项2" value="2"></el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
value: ''
};
}
};
</script>主题定制（可选）
如需修改默认主题，可通过官方主题工具 element-theme 或 SCSS 变量覆盖：
- 安装主题工具：
npm install element-theme -g
npm install element-theme-chalk -D- 生成变量文件并修改：
et --init- 编译主题：
et- 在项目中引用生成的主题文件：
import '../theme/index.css';
