背景 vue3 + ts + vite

1.下载包

npm install element-plus --save
npm install vite-plugin-components -D
npm install vite-plugin-style-import -D

2.vite.config.js进行配置

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'
import ViteComponents, { ElementPlusResolver } from 'vite-plugin-components'
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue(),
        //按需导入element-plus组件
        ViteComponents({
            customComponentResolvers: [ElementPlusResolver()],
        }),
        styleImport({
            libs: [
                // 按需加载vxe-table
                {
                    libraryName: "vxe-table",
                    esModule: true,
                    resolveComponent: name => `vxe-table/es/${name}`,
                    resolveStyle: name => `vxe-table/es/${name}/style.css`
                }
            ]
        })]
})

不需要再main.ts进行配置，会自动插入，插件会自动挂载处理

3.组件使用

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup

</script>

<template>
  <div>123456</div>
  <el-button>Default</el-button>
  <el-button type="primary">Primary</el-button>
</template>

<style>

</style>