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>
相关推荐
九皇叔叔8 小时前
HTML与CSS基础入门:从语法到页面结构全解析
css·html·1024程序员节
_殊途9 小时前
HTML-CSS项目练习
前端·css·html
β添砖java11 小时前
vivo响应式官网
前端·css·html·1024程序员节
jingling55520 小时前
CSS进阶 | 不用一行JS!用纯CSS打造会动的现代化单页应用(3D翻转卡片)
前端·javascript·css
Gee Explorer1 天前
第一篇使用HTML写一个随机点名网页
css·html5·1024程序员节
前端橙一陈1 天前
彻底理解 Bootstrap 的响应式断点机制:从 CSS 到 SCSS 的实现原理
css·bootstrap·scss
神膘护体小月半1 天前
css 的 clip-path 属性,绘制气泡
css
代码改变世界100861 天前
像素塔防游戏:像素守卫者
css·游戏·css3·1024程序员节
木易 士心1 天前
CSS 样式用法大全
前端·css·1024程序员节
皓月Code1 天前
第二章、全局配置项目主题色(主题切换+跟随系统)
javascript·css·react.js·1024程序员节