集成element-plus

Element Plus 是一个基于 Vue3的组件库，用于构建用户界面。它提供了一套丰富的可复用的 UI 组件，使开发者能够更轻松地构建现代化的 Web 应用程序。

TIP

访问element-plus的文档请使用https://element-plus.org/

不要使用https://element-plus.gitee.io/

特点

• 丰富的组件：Element Plus 提供了大量常用的 UI 组件，如按钮、表单、表格、对话框、菜单等，涵盖了开发中常见的各种交互元素，使开发者能够快速构建用户界面。
• 简洁美观：Element Plus 的设计风格简洁、美观，符合现代化的 UI 设计原则，能够为应用程序提供统一、一致的外观和用户体验。
• 响应式布局：Element Plus 支持响应式布局，能够适应不同屏幕尺寸和设备，保证应用程序在不同平台上的可用性和可访问性。
• 易于使用和定制：Element Plus 提供了清晰的文档和示例，使开发者能够快速上手并灵活地定制组件的样式和行为，以满足特定需求。
• 生态整合：Element Plus 是基于 Vue.js 构建的，与 Vue 生态系统完美集成，可以与其他 Vue 生态系统中的工具和库（如 Vue Router 和 pinia）无缝配合使用。
• Element Plus 是一个开源的项目，使用MIT许可证，因此可以免费用于商业和个人项目。它的官方网站提供了详细的文档、示例和社区支持，方便开发者学习和使用。

安装element-plus

兼容性

Element Plus 支持最近两个版本的浏览器。

如果您需要支持旧版本的浏览器，请自行添加 Babel 和相应的 Polyfill 。

由于 Vue 3 不再支持 IE11，Element Plus 也不再支持IE浏览器。

版本	Chrome	Edge	Firefox	Safari
< 2.5.0	Chrome ≥ 64	Edge ≥ 79	Firefox ≥ 78	Safari ≥ 12
2.5.0 +	Chrome ≥ 85	Edge ≥ 85	Firefox ≥ 79	Safari ≥ 14.1

使用包管理器

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

注册element-plus

全局注册

优点是写起来很方便，缺点是打出来的包很大

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

按需导入

可以先在全局导入element-plus的样式

// main.ts
import { createApp } from 'vue'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)

app.mount('#app')

再在需要使用的地方手动导入即可

<template>
    <el-button>我是ElButton </el-button>
</template>
<script lang="ts" setup>
import { ElButton } from 'element-plus'
</script>

自动按需导入

这个是官网推荐的方法，感兴趣的看下这里，但是我不推荐，理由如下：

• 组件不变色，虽然可以通过插件解决，但是增加了一部分与开发无关的工作
• 引用某些三方组件项目会报错或卡死，报错还好，卡死的情况很难发现是因为三方组件和此方法冲突导致
• 如果另一个项目没有安装自动导入插件的话，你的代码是不能直接复用在别的项目上的