element-plus的按需导入-自动导入和手动导入

一、纯手动引入组件和样式

例如：

import 'element-plus/es/components/message/style/css'
import { ElMessage } from 'element-plus'

二、手动引入组件，自动引入样式

安装 unplugin-element-plus来自动引入样式，插件的主要功能如下：

import { ElButton } from 'element-plus'

//    ↓ ↓ ↓ ↓ ↓ ↓

import { ElButton } from 'element-plus'
import 'element-plus/es/components/button/style/css'

实现方法：

1. 安装 unplugin-element-plus
2. 以vite的配置文件中添加如下代码

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

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

三、完全自动导入组件和样式

• 当我们使用element的标签时，无需再使用import对组件进行导入。

实现方法：

1. 安装unplugin-vue-components 和 unplugin-auto-import

npm install -D unplugin-vue-components unplugin-auto-import

2. 把下列代码插入到 Vite 的配置文件中

// vite.config.ts
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()],
    }),
  ],
})

使用：

当我们在template中使用组件时，例如： <el-button> My Button </el-button> 会自动引入ElButton组件。

四、完全自动导入组件和样式存在的问题

当我们使用命令的方式创建element组件时，样式不会自动引入。

例如：

import { ElMessage } from 'element-plus'
ElMessage.warning('warning')

1. 如果不使用import的方式引入，会直接报错：ElMessage没有定义；
2. 但是当使用了import了之后，消息弹窗是出来了，但是却没有样式。

解决方案：

安装unplugin-element-plus插件，配置自动导入样式（即：手动引入组件，自动引入样式）