windicss使用
1)安装 npm i -D vite-plugin-windicss windicss
2)在vite.config.ts中引入
import Windicss from 'vite-plugin-windicss'
export default defineConfig({
plugins: [
vue(),
Windicss()]
})
3)main.ts中使用
4)新建windi.config.ts
import { defineConfig } from "vite-plugin-windicss";
import formsPlugin from "windicss/plugin/forms";
export default defineConfig({
attributify: true,
plugins: [formsPlugin]
})
5)使用app.vue
<template>
<div class="layout-header">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
<div class="w-100 h-100 bg-red-100"> 使用方式二</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
.layout-header{
height: 64px;
background-color: blueviolet;
@apply flex flex-row justify-between items-center pl-1 pr-8;/**这个就应该是使用方式一 */
}
</style>