1.安装

npm i -D vite-plugin-windicss windicss

2.注册

修改vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import WindiCSS from 'vite-plugin-windicss'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),WindiCSS()]
})

3.引入main.js中引入windi.css

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persist'
import 'virtual:windi.css'

const pinia = createPinia()
pinia.use(piniaPersist)

createApp(App).use(router).use(pinia).mount('#app')

4.使用（注意：引入windi后，所有原生的样式将会全部失效，如果不想失效，就要去配置一下，见步骤5）Vite 集成 | Windi CSShttps://cn.windicss.org/integrations/vite.html

5.配置

在根目录下新建文件windi.config.js，内容如下

// @ts-check - enable TS check for js file
import { defineConfig } from 'windicss/helpers'

export default defineConfig({
    /* configurations... */
    preflight: false
})