elementui import

安装 Element UI

在项目中使用 npm 或 yarn 安装 Element UI：

npm install element-ui --save

或

yarn add element-ui

完整引入

在项目的入口文件（如 main.js 或 main.ts）中全局引入 Element UI：

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

Vue.use(ElementUI);

new Vue({
  render: h => h(App),
}).$mount('#app');

按需引入

通过插件（如 babel-plugin-component）实现按需引入以减少打包体积。

安装 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);

国际化支持

如果需要使用其他语言（如英文），引入对应的语言包：

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

Vue.use(ElementUI, { locale });

自定义主题

通过修改主题变量文件或使用在线主题生成工具实现自定义主题。

1. 安装主题生成工具：

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

2. 初始化变量文件：

   et --init

3. 修改生成的 element-variables.scss 文件中的变量值。

4. 编译主题：

   et

5. 在项目中引入生成的主题文件：

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