实现elementui

安装Element UI

通过npm或yarn安装Element UI到Vue项目中：

npm install element-ui --save
# 或
yarn add element-ui

完整引入

在Vue项目的入口文件（如main.js）中全局引入Element UI及其CSS样式：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

按需引入

使用babel-plugin-component仅引入需要的组件以减少打包体积：

1. 安装插件：

   npm install babel-plugin-component -D

2. 修改babel.config.js，添加插件配置：

   module.exports = {
   plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
   ]
   };

3. 在代码中按需引入组件（如Button和Select）：

   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>

主题定制

通过覆盖SCSS变量自定义主题：

1. 安装Sass预处理器：

   npm install sass sass-loader -D

2. 创建主题文件（如element-variables.scss）并修改变量：

   $--color-primary: #ff4500;
   @import "~element-ui/packages/theme-chalk/src/index";

3. 在项目入口文件中引入该文件替代默认CSS：

   import './element-variables.scss';

国际化

切换组件语言为英文或其他支持的语言：

import Vue from 'vue';
import ElementUI from 'element-ui';
import locale from 'element-ui/lib/locale/lang/en';

Vue.use(ElementUI, { locale });

注意事项

• 确保Vue版本为2.x，Element UI不兼容Vue 3。
• 按需引入需配合Babel插件，避免手动引入样式文件缺失。
• 主题定制需在项目构建前完成SCSS变量覆盖。