elementui install

安装 Element UI

Element UI 是一个基于 Vue.js 的组件库，安装过程简单，可以通过 npm 或 yarn 进行安装。

使用 npm 安装：

npm install element-ui -S

使用 yarn 安装：

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 { Button, Select } from 'element-ui';

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

使用 Element UI 组件

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

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

国际化支持

如果需要支持多语言，可以引入 Element UI 的国际化配置：

import Vue from 'vue';
import ElementUI from 'element-ui';
import locale from 'element-ui/lib/locale/lang/en'; // 引入英文语言包

Vue.use(ElementUI, { locale });

自定义主题

Element UI 支持自定义主题。首先安装主题生成工具：

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

初始化变量文件：

et -i

修改生成的 element-variables.scss 文件中的变量，然后编译主题：

et

编译完成后，在项目中引入自定义主题文件：

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