Vite+Vue3学习：Element Plus或Ant Design的按需引入

方法一：官网中的按需引入，但是如果使用message组件会没有样式，需要单独引入组件样式
方法二：通过插件根据手动引入的组件来自动引入样式

安装

建议使用1.4.1版本，最新的2.0.0版本有点问题
2.0.0版本使用和1.4.1版本稍微使用方法有点不一样
vite-plugin-style-import@1.4.0
vite-plugin-style-import@2.0.0

// yarn
yarn add vite-plugin-style-import -D

// npm
npm i vite-plugin-style-import -D

使用 —— Element Plus

新建build文件夹，再在里面新建styleImport.js

// build/styleImport.js

// 1.4.1
import styleImport, { ElementPlusResolve } from 'vite-plugin-style-import'

// 2.0.0
import {createStyleImportPlugin, ElementPlusResolve } from 'vite-plugin-style-import'

export function configStyleImportPlugin() {
    // 1.4.1
    const styleImportPlugin = styleImport({
  
    // 2.0.0
    // const styleImportPlugin = createStyleImportPlugin({
        resolves: [ElementPlusResolve()],
        libs: [
            {
                libraryName: 'element-plus',
                esModule: true,
                resolveStyle: name => {
                // 由于组件都带有 el- 但是样式文件没用，所以去掉这个
                return `element-plus/es/components/${name.slice(3)}/style/css`
            },
        ],
    })
    return styleImportPlugin
}

在vite.config.js里面引入

import { configStyleImportPlugin } from './build/styleImport'

export default {
    plugins: [configStyleImportPlugin()],
}

在vue文件里面直接引入组件就能使用了

<script setup>
import { ElMessage, ElButton } from 'element-plus'
ElMessage.success('测试消息')
</script>

<template>
    <ElButton>测试按钮</ElButton>
</template>

使用 —— Ant Design

只是styleImport.js文件的配置和在VUE文件引入不同，其他的都一样

// build/styleImport.js

// 1.4.1
import styleImport, {AndDesignVueResolve} from 'vite-plugin-style-import'

export function configStyleImportPlugin() {
    // 1.4.1
    const styleImportPlugin = styleImport({
        resolves: [ElementPlusResolve()],
        libs: [
            {
                libraryName: 'ant-design-vue',
                esModule: true,
                resolveStyle: name => {
                return `ant-design-vue/es/${name}/style/css`
            },
        ],
    })
    return styleImportPlugin
}

在vue文件里面直接引入组件就能使用了

<script setup>
import { message, Button } from 'ant-design-vue';
message.info('测试消息');
</script>

<template>
<Button type="primary">测试按钮</Button>
</template>