vite+vue3+element-plus配置按需自动导入

1. 安装elementPlus框架：npm install element-plus --save

2. 安装按需自动导入：npm install -D unplugin-vue-components unplugin-auto-import，这两个插件用于按需自动导入elementPlus，插件的作用其实是将组件需要的css文件自动引入进来，不需要我们在js里面手动import，只需要在模板写上elementPlus的组件即可。

当然并不是安装了就可以了，需要在vite.config.js文件里配置vite：

vite里导入：

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

vite里配置：

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

 这样elementPlus样式和交互的自动导入就配置完成了。

3.安装Icon 图标自动导入：首先安装图标npm install @element-plus/icons-vue；安装自动导入：npm i -D unplugin-icons unplugin-vue-components(上面已经安装了unplugin-vue-components，这里可以只写unplugin-icons)

vite里导入：

import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'

vite里配置：

export default defineConfig({
  plugins: [
    AutoImport({
      resolvers: [
        IconsResolver({
          prefix: 'Icon',
        })
      ],
    }),
    Components({
      resolvers: [
        IconsResolver({
          prefix: 'icon',
          enabledCollections: ['ep'],
        }),
      ],
    }),
    Icons({
      autoInstall: true,
    })
  ],
})

其中自动导入必须遵循名称格式 {prefix：默认为i}-{collection：图标集合的名称}-{icon：图标名称}
按照上面代码定义的，即我们应该写<el-icon><icon-ep-Search  /></el-icon> 或直接<icon-ep-Search  />（注意ep可以改成别的，但不能改成el）。

上面的Search是通过elementPlus官网的图标里面复制的名字（复制出来一般是<el-icon><Plus /></el-icon>这种格式，我们取里面的图标名字如Plus即可）

官网：Icon 图标 | Element Plus

注意：element某些组件自带icon，如果我们不需要改它们，那就直接使用即可，图标也会自动导入进来，如果我们需要改图标或者需要图标，则需要参考官网的图标位置的插槽来定义，例如：

<el-input v-model.trim="searchInput" @change="search">
      <!-- prefix图标居左,suffix图标居右 -->
      <template #suffix v-if="iconPositionC === 1">
        <div class="icon">
          <icon-ep-Search />
        </div>
      </template>
      <template #prefix v-if="iconPositionC === 2">
        <div class="icon">
          <icon-ep-Search />
        </div>
      </template>
 </el-input>

4. 完整的配置了ui按需自动导入和图标自动导入的vite配置如下

// 配置自动导入element ui组件
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// 配置自动导入element icon
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'

export default defineConfig({
  plugins: [
    AutoImport({
      resolvers: [
        ElementPlusResolver(),
        IconsResolver({
          prefix: 'Icon',
        })
      ],
    }),
    Components({
      resolvers: [
        ElementPlusResolver(),
        IconsResolver({
          prefix: 'icon',
          enabledCollections: ['ep'],
        }),
      ],
    }),
    Icons({
      autoInstall: true,
    })
  ],
})