一、插件文件

1.1、 将 src/main.ts 中的 UnoCss 的样式移动到 src/plugins/uno.ts文件中

// src/plugins/uno.ts

// 引入 UnoCss 样式
import 'virtual:uno.css'

/**
 * 创建一个空函数，用来加载当前文件
 */
export function setupUnoCss() {}

1.2、在 src/main.ts 中调用 setupUnoCss() 方法

// src/main.ts

import { setupUnoCss } from './plugins/uno'

const app = createApp(App)

// 设置 unocss
setupUnoCss()

app.mount('#app')

1.3、创建 src/plugins/assets.ts 文件用来加载静态资源

// src/plugins/assets.ts 

/**
 * 引入静态资源
 */
export function setupAssets() {}

1.4、在 src/main.ts 中调用 setupAssets() 方法

// src/main.ts

import { setupAssets} from './plugins/assets'

const app = createApp(App)

// 设置静态资源
// 注意: setupAssets() 必须要在 setupAntd() 和 setupUnoCss() 之后执行, 才能进行样式重写
setupAssets()

app.mount('#app')

二、样式文件

2.1、 删除 src/assets 中的 base.css 和 main.css，并在 src/main.ts 删除引用

// src/main.ts

// 删除此行代码
import './assets/main.css'

2.2、在 src 中创建一个 styles 文件夹，并在此文件夹下创建 antdv.override.less 和 index.less 文件

// src/styles/antdv.override.less
// antd 样式的重写

.ant-col {
    width: 100%;
}

body {
    .ant-message {
        z-index: 999999;
    }
}

.ant-image-preview-root img {
    display: unset;
}

2.3、将 src/styles/antdv.override.less 引入到 src/styles/index.less 中

// src/styles/index.less

@import './antdv.override.less';

2.4、将 src/styles/index.less 引入到 src/plugins/assets.ts 中

// src/plugins/assets.ts

import '@/styles/index.less';

三、组件文件

3.1、清空 App.vue 文件

<script setup>

</script>

<template>
    这是 App.vue 文件
</template>

<style scoped>

</style>

3.2、将 src/components 中的组件全部删除，仅保留 src/components 文件夹

src/components 文件夹将来会用来存放自定义的各种各样的全局组件