vue3的Element plus （一）

介绍

Element Plus 是一个基于 Vue 3 的 UI 组件库，它是对 Element UI 组件库的升级和扩展。Element Plus 提供了一套美观、易用且高效的组件，可以用于构建现代化的 Web 应用程序。

Element Plus 的主要特点包括：

1. 支持 Vue 3：Element Plus 是专为 Vue 3 开发的，充分利用 Vue 3 的新特性和优势。
2. TypeScript 支持：Element Plus 提供了完整的 TypeScript 类型定义，可以提供更好的类型检查和开发体验。
3. 模块化设计：Element Plus 的组件设计采用了模块化的结构，可以按需引入所需的组件，减小项目体积。
4. 扩展性：Element Plus 提供了一些扩展的组件和功能，使得开发者可以根据自己的需求进行定制和扩展。
5. 响应式布局：Element Plus 的组件可以自动适应不同的屏幕尺寸和设备，提供一致的用户体验。
6. 多语言支持：Element Plus 内置了多国语言支持，可以轻松实现多语言切换。
7. 文档丰富：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我们就展示一下图标的使用

再引入资源中需要单独引入图标

import { Camera, Right, Edit } from "@element-plus/icons-vue";

按钮后面的图标  

 

        前往查看
          
            
          
        
      

别忘了单独引入