导入elementui

安装 Element UI

通过 npm 安装 Element UI，适用于 Vue.js 项目。在项目根目录下运行以下命令：

npm install element-ui --save

完整引入 Element UI

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

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 --save-dev

修改 babel.config.js 文件：

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

按需引入示例（在组件文件中）：

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

export default {
  components: {
    'el-button': Button,
    'el-select': Select
  }
};

国际化配置

Element UI 默认支持中文，如需切换语言，在入口文件中配置：

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

Vue.use(ElementUI, { locale });

自定义主题

通过修改 SCSS 变量自定义主题。安装主题生成工具：

npm install element-theme -g
npm install element-theme-chalk -D

生成主题变量文件并编译：

et --init
et

在项目中引用生成的主题文件：

import '../theme/index.css';

注意事项

• 确保项目已安装 Vue.js 2.x 版本，Element UI 不兼容 Vue 3。
• 按需引入时需配合 Babel 插件，避免手动引入样式文件。