使用Windi CSS（基于vue-cli）

要在Vue项目中使用Windi CSS，你需要先安装Windi CSS依赖，并配置Vue项目以使用它。以下是步骤和示例代码：

1. 安装Windi CSS依赖：

npm install windicss windicss-webpack-plugin -D

2. 在Vue项目中配置Windi CSS。你可以在vue.config.js文件中添加配置：

const WindiCSSWebpackPlugin = require('windicss-webpack-plugin')
 
module.exports = {
  css: {
    loaderOptions: {
      css: {
        // 使用 Windi CSS 的 opt-in 功能
        loaderOptions: {
          customize: require.resolve('windicss/utils/customize'),
        },
      },
    },
  },
  configureWebpack: {
    plugins: [
      new WindiCSSWebpackPlugin({
        virtualModulePath: '~windi.css',
      }),
    ],
  },
}

3. 在main.js或App.vue中引入生成的虚拟CSS文件：

import '~windi.css'
 
// 你的Vue实例代码
new Vue({
  render: h => h(App),
}).$mount('#app')

现在，Windi CSS 应该已经配置好并在你的Vue项目中使用了。你可以开始使用Windi CSS的实用性属性来编写你的样式，而不需要预定义的类。