vue3 集成 Element-Plus之全局导入/按需导入

在Vue 3中，您可以使用Element Plus作为UI框架，并且可以选择全局导入或者按需导入组件。

全局导入Element Plus：

1. 安装Element Plus：

npm install element-plus --save

2. 在main.js或main.ts中全局导入Element Plus及其样式：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
 
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

按需导入组件：

1. 安装Element Plus及其按需导入工具unplugin-element-plus：

npm install element-plus --save
npm install unplugin-element-plus --save-dev

2. 配置vite.config.js或webpack.config.js使用unplugin-element-plus/webpack插件（Vite使用对应的插件）：

// vite.config.js
import { defineConfig } from 'vite'
import ElementPlus from 'unplugin-element-plus/vite'
 
export default defineConfig({
  plugins: [
    ElementPlus({
      // 配置选项
    }),
  ],
})

3. 在组件中按需导入组件及其样式：

<script setup>
import { ElButton } from 'element-plus'
</script>
 
<template>
  <el-button>按钮</el-button>
</template>

按需导入可以帮助您减少最终打包体积，因为它只包含您实际使用的组件。