ElementUI怎样

安装 ElementUI

ElementUI 可以通过 npm 或 yarn 安装。在项目根目录下运行以下命令：

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

安装完成后，可以在项目中引入并使用。

引入 ElementUI

在项目的入口文件（如 main.js）中引入 ElementUI 及其样式文件：

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

Vue.use(ElementUI);

这样，ElementUI 的组件就可以在项目的任何地方使用了。

使用组件

ElementUI 提供了丰富的组件，如按钮、表单、表格等。以下是一个简单的按钮组件示例：

<template>
  <el-button type="primary">主要按钮</el-button>
</template>

按需引入

如果项目对体积敏感，可以通过按需引入的方式减少打包体积。首先安装 babel-plugin-component：

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

然后在 .babelrc 或 babel.config.js 中配置：

{
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

之后可以按需引入组件：

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

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

主题定制

ElementUI 支持主题定制。可以通过安装主题生成工具来定制主题：

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

初始化变量文件：

et -i

编辑生成的 element-variables.scss 文件，然后编译主题：

et

编译完成后，引入生成的主题文件替换默认样式：

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

国际化

ElementUI 支持多语言。可以通过引入语言包来实现：

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

Vue.use(ElementUI, { locale });

与 Vue CLI 集成

在 Vue CLI 创建的项目中，可以通过 vue add 命令快速集成 ElementUI：

vue add element

按照提示选择按需引入或全局引入，以及语言配置。

常见问题

组件未生效时，检查是否正确引入样式文件。按需引入时，确保 babel 配置正确。主题定制时，注意路径是否正确。国际化配置时，确保语言包匹配。