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

无道 2021-08-11 0 条评论 前端相关 阅读271 手机阅读

前言

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

如下:

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

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

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可是一个大佬,有空建议去他的仓库看看。

安装

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

配置vite.config.ts

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,添加:

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

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

发现,按需引入了!!!

且文件很小!

全文完 [
有帮助?打赏
支付宝打赏
微信打赏
]
标签: vite element-plus
修改: 08月11日 15:24
这篇文章还没有评论呢~
点击刷新/生成验证码