elementui package

以下是关于 Element UI（基于 Vue.js 的组件库）的安装和使用方法：

安装 Element UI

通过 npm 或 yarn 安装 Element UI 包：

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

完整引入

在 Vue 项目的入口文件（如 main.js）中全局引入：

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. 在需要的地方单独引入组件：

   import { Button, Select } from 'element-ui';
   Vue.component(Button.name, Button);
   Vue.component(Select.name, Select);

国际化支持

若需切换语言，例如使用中文：

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

Vue.use(ElementUI, { locale });

自定义主题

通过覆盖 SCSS 变量实现主题定制：

1. 创建 element-variables.scss 文件：

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

2. 在项目中引入该文件（需配置 Sass 加载器）。

注意事项

• Element UI 2.x 仅支持 Vue 2.x，Vue 3.x 需使用 Element Plus。
• 生产环境建议按需引入以减少打包体积。
• 官方文档提供完整的组件 API 和示例（https://element.eleme.io）。