elementui require

安装 Element UI

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

npm install element-ui --save

或

yarn add element-ui

引入 Element UI

在项目中引入 Element UI 的方式分为完整引入和按需引入两种。

完整引入

在项目的入口文件（如 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：

npm install babel-plugin-component -D

然后在项目根目录下的 babel.config.js 或 .babelrc 文件中添加配置：

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

之后在需要的地方按需引入组件，例如：

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import 'element-ui/lib/theme-chalk/button.css';
import 'element-ui/lib/theme-chalk/select.css';

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

使用 Element UI 组件

引入后可以直接在模板中使用 Element UI 的组件。例如：

<template>
  <el-button type="primary">按钮</el-button>
  <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: '选项1', label: '选项1' },
        { value: '选项2', label: '选项2' }
      ],
      value: ''
    };
  }
};
</script>

主题定制

如果需要定制主题，可以使用 Element UI 提供的主题工具。首先安装主题生成工具：

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

然后在项目根目录下运行以下命令生成主题文件：

et -i

这会生成一个 element-variables.scss 文件，修改其中的变量后运行：

et

生成的主题文件会保存在 ./theme 目录下，最后在项目中引入自定义主题：

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

Vue.use(ElementUI);

注意事项

• 按需引入时，需要确保 babel-plugin-component 配置正确。
• 主题定制时，确保安装了 element-theme 和 element-theme-chalk。
• 如果遇到样式问题，检查 CSS 文件是否正确引入。