//安裝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導(dǎo)出，只有導(dǎo)出了，才能讓別的文件進(jìn)行import
export const nutUiComponents = [
    Button,
];

//添加導(dǎo)入
import { nutUiComponents } from './plugins/nutUI';
//基于App.vue(根組件)創(chuàng)建一個(gè)vue實(shí)例
const app = createApp(App)
//全局使用導(dǎo)入的NutUI組件
nutUiComponents.forEach((item)=>{
    app.use(item)
})
//把vue實(shí)例掛載到index.html => #app
app.mount('#app')

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