Vue如何使用ElementUi（EelementUI基本使用与入门）

前言（什么是ElementUI）

        本文献给刚刚使用或者还没有使用过ElementUi的小伙伴。Element UI 是一套基于 Vue.js 2的桌面端组件库，由饿了么前端团队开发并维护。它提供了丰富的组件和功能，帮助开发者快速构建用户界面，适用于中后台管理系统、后台管理平台等场景。

主要特点

1. 丰富的组件库：Element UI 提供了大量的组件，包括按钮、表单、表格、对话框、导航菜单、日期选择器等，几乎覆盖了常见的 UI 需求。
2. 响应式设计：组件支持响应式布局，能够适应不同尺寸的设备，包括桌面、平板和移动设备。
3. 易于使用：Element UI 的 API 设计简洁明了，文档详细，开发者可以快速上手并集成到项目中。
4. 主题定制：支持通过自定义主题来改变组件的样式，满足不同项目的设计需求。
5. 国际化支持：Element UI 提供了多语言支持，开发者可以根据需要选择不同的语言包。

如何使用ElementUi

1、首先线上连接：

• 官方文档：Element UI 官方文档
• GitHub 仓库：Element UI GitHub

要想使用ElementUI需要在vue中导入

npm install element-ui --save 

2、在vue中引入后在main.js 中全局引入 Element-UI 及其样式：

// 从 'vue' 包中导入 Vue 类
import Vue from 'vue';
// 从 'element-ui' 包中导入 ElementUI 组件库
import ElementUI from 'element-ui';
// 导入 Element UI 的 CSS 样式文件，确保组件样式正确应用
import 'element-ui/lib/theme-chalk/index.css';
// 使用 Vue.use() 方法全局注册 ElementUI 组件库
// 这样在整个 Vue 应用中都可以使用 Element UI 提供的组件
Vue.use(ElementUI);
// 创建一个新的 Vue 实例
// render 函数使用 h 函数（createElement 的简写）来渲染 App 组件
// 并将这个 Vue 实例挂载到 ID 为 'app' 的 DOM 元素上
new Vue({
  render: h => h(App)  // h 是 createElement 函数的简写，用于创建 VNode
}).$mount('#app');  // 将 Vue 实例挂载到 ID 为 'app' 的 DOM 元素上

3、使用 Element-UI 组件

Element-UI 的使用非常简单，直接在模板中使用对应的组件即可：

<template>
  <!-- 外层容器 div，包含两个子组件 -->
  <div>
    <!-- Element UI 的按钮组件，type 属性设置为 'primary'，显示为主要按钮样式 -->
    <el-button type="primary">Primary Button</el-button>
    
    <!-- Element UI 的输入框组件，placeholder 属性设置为提示文本 -->
    <el-input placeholder="Please input"></el-input>
  </div>
</template>

 二，按需导入ElementUI

        按需引入是指只加载和使用需要的组件，从而减少最终打包的体积，提高应用的加载速度。在大型项目中，按需引入可以显著优化性能。

1、 安装 babel-plugin-component

为了实现按需引入，我们需要安装 babel-plugin-component 插件：

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

2、配置按需引入

在 babel.config.js 中配置 babel-plugin-component 插件：

// 导出一个配置对象，用于配置 Babel
module.exports = {
  // 预设配置，使用 Vue CLI 提供的预设
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  // 插件配置，这里使用了 babel-plugin-component 插件
  plugins: [
    [
      'component',  // 插件名称
      {
        // 指定要按需引入的组件库名称，这里是 Element UI
        libraryName: 'element-ui',
        // 指定样式库的名称，这里是 Element UI 的默认样式库
        styleLibraryName: 'theme-chalk'
      }
    ]
  ]
};

3、 使用按需引入组件

在按需引入配置完成后，我们可以在需要使用组件的地方单独引入：

// 从 'element-ui' 包中按需引入 Button 和 Input 组件
import { Button, Input } from 'element-ui';

// 导出一个 Vue 组件配置对象
export default {
  // 在 components 选项中注册按需引入的组件
  components: {
    // 注册一个名为 'el-button' 的组件，实际组件为 Button
    'el-button': Button,
    // 注册一个名为 'el-input' 的组件，实际组件为 Input
    'el-input': Input
  }
};

总结

        通过这种方式，只会打包使用到的组件和样式，减少了最终的打包体积，优化了应用的加载速度。你可以在项目中根据需要按需引入其他 Element UI 组件，并在组件配置中进行注册