vue3中使用Element-Plus的几种方式

前言

1、Element-Plus

Element-Plus是一套为开发者、设计师和产品经理准备的基于Vue 3.0的桌面端组件库。

1.1 概述

Element-Plus在Element UI的基础上进行了升级和优化，提供了更加丰富和强大的组件库。它基于Vue 3.0构建，并使用了TypeScript进行编写，为开发者提供了类型提示和代码补全等增强功能。Element-Plus的组件设计简洁明了，易于使用，同时提供了丰富的API和插槽，方便开发者进行定制和扩展。

1.2 主要特点

• 丰富的组件库：Element-Plus提供了多种常用的布局组件和UI组件，如容器、栅格布局、卡片、面板、表格、表单、按钮、导航、通知等。这些组件可以帮助开发者快速构建出结构清晰、易于维护的页面布局。
• 高度的可定制性：Element-Plus允许开发者通过修改样式、属性、事件等方式对组件进行定制。此外，它还提供了主题定制功能，可以根据需要更换组件的样式。
• 良好的性能表现：Element-Plus通过优化组件代码和压缩图片等方式，提高了Web应用的加载速度和运行效率。
  详细的文档和教程：Element-Plus提供了详细的文档和教程，帮助开发者更好地掌握和使用该组件库。

---

2、安装及使用

2.1 安装Element-Plus

我们在NVM配置与Vue3+Vite项目快速搭建指南的基础上进行安装。
在终端输入命令npm i element-plus

2.2 使用

1、完整引入

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。
在main.js中写入引入代码：

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

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

2、按需导入（推荐）

您需要使用额外的插件来导入要使用的组件。
自动导入首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件
npm install -D unplugin-vue-components unplugin-auto-import
然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中
Vite

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

Webpack

// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  // ...
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

3、手动导入

Element Plus 提供了基于 ES Module 开箱即用的 Tree Shaking 功能。
但是你需要安装 unplugin-element-plus 来导入样式。

App.vue

// App.vue
<template>
  <el-button>I am ElButton</el-button>
</template>
<script>
  import { ElButton } from 'element-plus'
  export default {
    components: { ElButton },
  }
</script>

vite.config.ts

// vite.config.ts
import { defineConfig } from 'vite'
import ElementPlus from 'unplugin-element-plus/vite'

export default defineConfig({
  // ...
  plugins: [ElementPlus()],
})

我们在这三种使用方法中使用按需引入，让我们来测试下。

测试效果

在App.vue中写入代码<el-button color="#626aef" :dark="isDark">Default</el-button>
可以看到效果如下：

可以看到我们将element-plus按组件给现实出来了。

2.3 icons-vue的使用

注册所有图标
在main.js中写入如下代码：

import { createApp } from 'vue'
import App from './App.vue'
import '@/assets/less/index.less'
import router from './router'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
app.use(router).mount('#app')
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

测试在Main.vue中，写入代码：<el-icon color="#409EFC" class="no-inherit">，可以看到效果如下：

---