vue3+TS项目配置unocss

配置unocss

(1)安装依赖

复制代码
npm i unocss @unocss/preset-uno @unocss/preset-attributify -D
npm install @unocss/transformer-directives

(2)根目录新建uno.config.ts文件

ts 复制代码
import { defineConfig } from "unocss";
import presetAttributify from "unocss/preset-attributify";
import presetWind3 from "unocss/preset-wind3";
import transformDirectives from "@unocss/transformer-directives";

export default defineConfig({
  presets: [presetWind3(), presetAttributify()],
  transformers: [transformDirectives()]
});

(3)修改main.ts

ts 复制代码
// main.ts 引入
import "uno.css";

(4)修改vite.config.ts

ts 复制代码
import { defineConfig } from "vite";
import UnoCss from "unocss/vite";
export default defineConfig({
  plugins: [
    UnoCss()
  ]
});

(5)组件中使用

规则查阅:文档

tsx 复制代码
<template>
  <!-- 1. 属性写法 -->
  <div class="content" text-red>
    1234567890
  </div>
</template>
<script setup lang="ts">
import { useDemoStore } from "@/store/demo";

const store = useDemoStore();
</script>
<style scoped lang="scss">
.content {
  // 2. 指令写法,内置指令
  @apply font-bold w-full h-[500px] flex justify-center items-center;
}
</style>
相关推荐
zhangxuyu11181 天前
flex布局学习记录
前端·css·学习
C+ 安口木2 天前
CSS通用优惠券样式
前端·css
蓝莓味的口香糖2 天前
【CSS】flex布局
前端·css
EveryPossible2 天前
第一版代码
前端·javascript·css
Filotimo_2 天前
2.CSS3.(2).html
前端·css
爱吃甜品的糯米团子3 天前
CSS Grid 网格布局完整指南:从容器到项目,实战详解
前端·css
web3d5203 天前
CSS水平垂直居中终极指南:从入门到精通
前端·css
我有一棵树3 天前
如何优雅的布局,height: 100% 的使用和 flex-grow: 1 的 min-height 陷阱
前端·css·html
m0_616188493 天前
CSS中的伪类和伪元素
前端·javascript·css
加油乐3 天前
Sass与Less的特性与区别
前端·css