「小记」Vite+Element Plus常用配置

一、自动导入组件

1、安装依赖

安装unplugin-vue-components 和 unplugin-auto-import这两款插件:

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

2、新增配置

把下列代码插入到你的 Vite 的配置文件中:

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()],
    }),
  ],
})

如何使用

无需 import ，直接使用即可：

<el-button>按钮</el-button>

二、自动导入图标

1、安装依赖

使用 unplugin-icons 和 unplugin-auto-import 从 iconify 中自动导入任何图标集。

pnpm install -D unplugin-icons unplugin-auto-import
pnpm install @element-plus/icons-vue @iconify-json/ep

2、新增配置

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'
+ import Icons from 'unplugin-icons/vite'
+ import IconsResolver from 'unplugin-icons/resolver'

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

3、如何使用

无需再次引入，在官方图标集合中标识的图标名前追加前缀IEp即可使用

<IEpPlus />
<IEMinus />

三、手动导入组件、自动导入样式

使用命令的方式创建element组件时，样式无法自动引入。

1、安装依赖

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

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

2、新增配置

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'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
+ import ElementPlus from 'unplugin-element-plus/vite'

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

3、如何使用

只需引入组件，组件样式将自动导入。

import { ElMessage, ElLoading } from 'element-plus'

四、其它

1、开启暗黑模式

2、国际化配置