elementui引用

安装 Element UI

在项目中通过 npm 或 yarn 安装 Element UI：

npm install element-ui --save
# 或
yarn add 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 插件实现按需引入，减少打包体积。

1. 安装插件：

   npm install babel-plugin-component --save-dev

2. 修改 babel.config.js 配置文件：

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

3. 在组件中按需引入：

   import { Button, Select } from 'element-ui';
   Vue.use(Button).use(Select);

国际化配置

若需切换语言，可引入国际化文件：

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

Vue.use(ElementUI, { locale });

主题定制

通过覆盖 SCSS 变量自定义主题：

1. 安装主题生成工具：

   npm install element-theme -g

2. 初始化变量文件并修改样式后编译：

   et -i
   et

CDN 引入

在 HTML 文件中直接通过 CDN 引入：

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>