详解如何创建基于vite的vue项目

//安装vant
yarn add vant
//按需加载模块
yarn add unplugin-vue-components -D

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
        plugins: [
                vue(),
                Components({
                        resolvers: [VantResolver()],
                }),
        ],
});

// Toast
import { showToast } from 'vant';
import 'vant/es/toast/style';
// Dialog
import { showDialog } from 'vant';
import 'vant/es/dialog/style';
// Notify
import { showNotify } from 'vant';
import 'vant/es/notify/style';
// ImagePreview
import { showImagePreview } from 'vant';
import 'vant/es/image-preview/style';

yarn add @nutui/nutui

yarn add consola
yarn add vite-plugin-style-import

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'

// add here
import { createStyleImportPlugin } from 'vite-plugin-style-import'

export default defineConfig({
    plugins: [
        vue(),
        Components({
            resolvers: [VantResolver()],
          }),
        // add here 
        createStyleImportPlugin({
                resolves: [{
                    libraryName: '@nutui/nutui',
                    libraryNameChangeCase: 'pascalCase',
                    resolveStyle: (name) => {
                    return `@nutui/nutui/dist/packages/${name.toLowerCase()}/index.scss`
                    },
                }]
        }),
    ],
    // add here 
    css: {
        preprocessorOptions: {
            scss: {
                // 配置 nutui 全局 scss 变量
                additionalData: `@import "@nutui/nutui/dist/styles/variables.scss";`
            }
        }
    },
})

//用于定义要加载的组件名
import {
    Button,
}from '@nutui/nutui'
//export导出，只有导出了，才能让别的文件进行import
export const nutUiComponents = [
    Button,
];

//添加导入
import { nutUiComponents } from './plugins/nutUI';
//基于App.vue(根组件)创建一个vue实例
const app = createApp(App)
//全局使用导入的NutUI组件
nutUiComponents.forEach((item)=>{
    app.use(item)
})
//把vue实例挂载到index.html => #app
app.mount('#app')

<template>
     <nut-button type="primary">主要按钮</nut-button>
</template>