elementui import

安装 Element UI

在项目中安装 Element UI 可以通过 npm 或 yarn 完成：

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

完整引入 Element UI

在 Vue 项目的入口文件（通常是 main.js 或 main.ts）中全局引入 Element UI：

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

Vue.use(ElementUI);

按需引入 Element UI

如果只需要部分组件，可以使用 babel-plugin-component 进行按需加载：

1. 安装 babel-plugin-component：

npm install babel-plugin-component -D
# 或
yarn add babel-plugin-component --dev

1. 修改 babel.config.js 配置文件：

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ]
  ]
};

1. 在组件中按需引入：

import { Button, Select } from 'element-ui';

Vue.use(Button);
Vue.use(Select);

国际化配置

如果需要使用中文语言包，可以在入口文件中引入：

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

Vue.use(ElementUI, { locale });

自定义主题

如果需要修改 Element UI 的默认主题，可以通过 SCSS 变量覆盖：

1. 安装 sass 和 sass-loader：

npm install sass sass-loader -D

1. 在项目中创建 element-variables.scss 文件：

/* 覆盖变量 */
$--color-primary: #ff6600;

/* 引入 Element UI 样式 */
@import '~element-ui/packages/theme-chalk/src/index';

1. 在入口文件中引入自定义样式文件：

import './element-variables.scss';

注意事项

• 如果项目基于 Vue 3，需要使用 Element Plus 而非 Element UI。
• 按需引入时，确保 babel-plugin-component 版本与 Element UI 兼容。
• 主题变量覆盖需在 sass-loader 正确配置的环境下生效。