vue 中使用 Windi CSSS 样式库_uniapp 2 windicss

学习目标：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>