vite按需引入element-plus一个插件搞定

前言

按照 element-plus 文档所言，是使用vite-plugin-style-import

如下：

代码语言：javascript复制

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

export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: 'element-plus',
          esModule: true,
          ensureStyleFile: true,
          resolveStyle: (name) => {
            return `element-plus/lib/theme-chalk/${name}.css`;
          },
          resolveComponent: (name) => {
            return `element-plus/lib/${name}`;
          },
        }
      ]
    })
  ]
})

但是，还是很麻烦，且需要手动引入

代码语言：javascript复制

const app = createApp(App)
app.component(ElButton.name, ElButton);
app.component(ElSelect.name, ElSelect);

/* or
 * app.use(ElButton)
 * app.use(ElSelect)
 */

使用其他

使用vite-plugin-components，这是antfu编写的一个插件，antfu可是一个大佬，有空建议去他的仓库看看。

安装

代码语言：javascript复制

yarn add element-plus -S
yarn add sass -D
yarn add vite-plugin-components -D

配置vite.config.ts

代码语言：javascript复制

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
 import ViteComponents, { ElementPlusResolver } from "vite-plugin-components";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
     ViteComponents({
       customComponentResolvers: [ElementPlusResolver({ importStyle: true })],
     }),
  ],
});

修改main.ts，添加：

代码语言：javascript复制

import "element-plus/packages/theme-chalk/src/base.scss";

在任意文件，运行一个<el-button></el-button>，编译yarn build

发现，按需引入了！！！

且文件很小！

typescript

0 人点赞