vue3的Element plus （一）
介绍
Element Plus 是一个基于 Vue 3 的 UI 组件库，它是对 Element UI 组件库的升级和扩展。Element Plus 提供了一套美观、易用且高效的组件，可以用于构建现代化的 Web 应用程序。
Element Plus 的主要特点包括：
- 支持 Vue 3：Element Plus 是专为 Vue 3 开发的，充分利用 Vue 3 的新特性和优势。
- TypeScript 支持：Element Plus 提供了完整的 TypeScript 类型定义，可以提供更好的类型检查和开发体验。
- 模块化设计：Element Plus 的组件设计采用了模块化的结构，可以按需引入所需的组件，减小项目体积。
- 扩展性：Element Plus 提供了一些扩展的组件和功能，使得开发者可以根据自己的需求进行定制和扩展。
- 响应式布局：Element Plus 的组件可以自动适应不同的屏幕尺寸和设备，提供一致的用户体验。
- 多语言支持：Element Plus 内置了多国语言支持，可以轻松实现多语言切换。
- 文档丰富：Element Plus 提供了详细的文档和示例，方便开发者学习和使用组件库。
Element Plus 是 Element UI 在 Vue 3 环境下的升级版，它保留了 Element UI 的优点并且改进了一些问题，是一个强大而灵活的组件库，适用于各种类型的 Vue 3 项目。
安装
我们建议您使用包管理器（如 NPM、Yarn 或 pnpm）安装 Element Plus，
# 选择一个你喜欢的包管理器# NPM
$ npm install element-plus --save# Yarn
$ yarn add element-plus# pnpm
$ pnpm install element-plus导入
其实这样就行
//main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import './style.css'
import App from './App.vue'
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";import router from "./router" // 引入router
import { InstallCodemirro } from "codemirror-editor-vue3" const pinia = createPinia()createApp(App).use(ElementPlus).use(pinia).use(InstallCodemirro).use(router).mount('#app')为什么要加
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
这段代码是在 Vue 3 中使用 Element Plus 的图标组件的示例。
首先，通过 import 语句引入了 @element-plus/icons-vue 模块，该模块包含了 Element Plus 提供的一系列图标组件。
然后，使用 createApp 函数创建了一个 Vue 应用实例，并将其赋值给变量 app。
接下来，通过 for...of 循环遍历了 ElementPlusIconsVue 对象的键值对，即图标名和对应的组件。在循环中，通过 app.component 方法注册了每个图标组件，将其设置为全局可用的组件。
最后，可以假设代码中的 App 是根组件，通过调用 app.mount 方法将应用挂载到页面上。
so 一定要加上这是跟之前vue2使用elment的图标不一样的地方要不然会展示不出来的
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import './style.css'
import App from './App.vue'
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";import router from "./router" // 引入router
import { InstallCodemirro } from "codemirror-editor-vue3" const pinia = createPinia()import * as ElementPlusIconsVue from '@element-plus/icons-vue'const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}createApp(App).use(ElementPlus).use(pinia).use(InstallCodemirro).use(router).mount('#app')使用
因为图标的使用会不一样，so我们就展示一下图标的使用
<template><div><el-icon :size="size" :color="color"><Edit /></el-icon><!-- 或者独立使用它，不从父级获取属性 --><Edit /></div>
</template>再引入资源中需要单独引入图标
import { Camera, Right, Edit } from "@element-plus/icons-vue";按钮后面的图标
<div><el-button class="goButton" type="primary"><span style="padding-right: 8px">前往查看</span><el-icon :size="20"><Right /></el-icon></el-button></div>别忘了单独引入