vue3+vite+ts 按需自动导入 Element Plus，以及遇到的问题

目录

1. 按需自动导入 Element Plus
2. 按需自动导入Icon图标
3. 按需自动导入 Element Plus，遇到的问题
4. 按需自动导入Icon图标，遇到的问题 

---

1.按需自动导入 Element Plus

          可以参考官网https://element-plus.org/zh-CN/guide/installation.html

         1.安装 Element Plus   

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

2.安装unplugin-vue-components 和 unplugin-auto-import这两款插件,这两个插件可以自动注册我们用到的组件。

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

3.在vite.config或 webpack.config的配置文件中配置相关内容

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

//自动按需导入element plus
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: [
    vue(),
    AutoImport({
      resolvers: [
        // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
        ElementPlusResolver(),
      ],
    }),
    Components({
      resolvers: [
        //自动导入 Element Plus 组件
        ElementPlusResolver(),
      ],
    }),
  ],
})

2.按需自动导入 Element Plus，遇到的问题 

问题1：

解决问题1：

遇到这一个问题之后，通过搜索发现，unplugin-vue-components@0.26.0版本太高了，降低版本就可以。

npm install -D unplugin-vue-components@0.25.0   

问题2：

使用 ElMessage与ElLoading 的时候出现 Cannot find name 'ElMessage' 的问题

解决问题2：

在tsconfig.json文件中引入auto-imports.d.ts

"include": [
    "src/**/*.ts", 
    "src/**/*.tsx", 
    "src/**/*.vue",
    "auto-imports.d.ts"//导入auto-imports.d.ts
  ],

        如果没有auto-imports.d.ts，可以添加一个element-plus.d.ts 文件，并在tsconfig.json文件中引入element-plus.d.ts

        element-puls.d.ts文件中的内容

export {}
declare global {
  const ElMessage:typeof import('element-plus')['ElMessage'] 
  const ElLoading:typeof import('element-plus')['ElLoading'] 
}

3.按需自动导入Icon图标

         可以参考官网https://element-plus.org/zh-CN/component/icon.html

        1.安装Icons

# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue

           2. 安装  unplugin-icons 和 unplugin-auto-import 这两个插件，使用这两个插件可以从 iconify 中自动导入任何图标集

npm install -D unplugin-icons

3.在vite.config或 webpack.config的配置文件中配置相关内容

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

//自动按需导入element plus
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

//自动按需导入icons
import IconResolver from "unplugin-icons/resolver";
import Icons from "unplugin-icons/vite";

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [
        ElementPlusResolver(),
        //icons
        IconResolver({ prefix: "icon" })
      ],
    }),
    Components({
      resolvers: [
        ElementPlusResolver(),
        //icons
        IconResolver(
         // { enabledCollections: ["ep"] } //element-plus图标库 需要修改图标使用方法
        )
      ],
    }),
    //icons
    Icons({ autoInstall: true }),
  ],
})

4.按需自动导入Icon图标，遇到的问题 

问题1：按需自动导入icons的项目中，正常使用图标的时候，不能够正常的使用

<Edit />
<el-button type="primary" :icon="Edit" circle />

解决问题1：

    <!-- 1.直接使用 -->
    <el-icon-Edit />
    <!-- 2.通过el-icon包裹使用 -->
    <el-icon>
      <el-icon-Edit/>
    </el-icon>
    <!-- 3.在button按钮中使用 -->
    <el-button type="primary"circle>
      <el-icon><el-icon-Edit/></el-icon>
    </el-button>