elementui入门

安装 Element UI

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

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

引入 Element UI

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

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

Vue.use(ElementUI);

使用组件

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

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

主题定制

Element UI 支持通过 SCSS 变量定制主题。在项目中创建一个 SCSS 文件（如 element-variables.scss）并覆盖默认变量：

$--color-primary: #ff0000;
@import "~element-ui/packages/theme-chalk/src/index";

然后在项目的构建配置中引入该文件。

国际化

Element UI 支持多语言。引入语言包并设置语言：

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

Vue.use(ElementUI, { locale });

按需引入

使用 babel-plugin-component 按需引入组件以减少打包体积。安装插件：

npm install babel-plugin-component -D

在 babel.config.js 中配置：

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

按需引入组件示例：

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

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);