vue 中使用 Windi CSSS 样式库

学习目标：Windi CSSS 使用

提示：Windi CSSS 在vue3 中简单使用

官网地址：https://cn.windicss.org

1，安装 Windi CSSS

npm i -D vite-plugin-windicss windicss

2，项目中配置 Windi CSSS vite为例 在vite.config.js  中配置

import WindiCSS from 'vite-plugin-windicss'

export default defineConfig({

  plugins: [vue(),WindiCSS()]
  
})

3，vscode 中安装  Windi CSSS 插件

4，使用示例

1, clss中直接引用 样式
<button class="flex items-center justify-center flex-col" @click="handelLogin">登录</button>



2, @apply 引用样式
<button class="flex-class" @click="handelLogin">登录</button>

<style scoped>
.flex-class {
    @apply flex items-center justify-center flex-col;
}
</style>