elementui注册

安装 Element UI

使用 npm 或 yarn 安装 Element UI 到项目中。确保项目已初始化并安装了 Vue.js。

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

引入 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';

Vue.use(ElementUI);

按需引入

使用 babel-plugin-component 插件按需引入组件，减少项目体积。

1. 安装插件：

   npm install babel-plugin-component -D
   # 或
   yarn add babel-plugin-component --dev

2. 修改 babel.config.js：

   module.exports = {
     presets: ['@vue/cli-plugin-babel/preset'],
     plugins: [
       [
         'component',
         {
           libraryName: 'element-ui',
           styleLibraryName: 'theme-chalk'
         }
       ]
     ]
   };

3. 在入口文件中按需引入组件：

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

配置国际化（可选）

Element UI 默认支持中文，如需切换为其他语言，可以引入对应的语言包。

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

Vue.use(ElementUI, { locale });

使用组件

在 Vue 组件中直接使用 Element UI 的组件。例如，使用按钮组件：

<template>
  <el-button type="primary">Primary Button</el-button>
</template>

自定义主题（可选）

如需修改默认主题样式，可以通过覆盖 SCSS 变量或使用在线主题生成工具。

1. 安装主题生成工具：

   npm install element-theme -g

2. 初始化主题变量文件：

   et -i

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

4. 编译主题：

   et

5. 在项目中引入编译后的主题文件：

   

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

注意事项

• 确保项目依赖的 Vue 版本与 Element UI 兼容。Element UI 2.x 支持 Vue 2.x，Element Plus 支持 Vue 3.x。
• 按需引入时，未引入的组件无法使用，需手动添加。
• 自定义主题需安装 sass-loader 和 node-sass 依赖。