Unocss(原子化css)使用

一 定义

原子化 CSS(Unocss)是一种编写 CSS 的方法,它强调使用小巧且用途单一的 CSS 类来构建页面,并且会以视觉效果进行命名 。每个类都只包含一个属性,以便在需要应用多个样式时可以组合这些类。这种方法可以使代码更具可复用性、易于维护,并且体积较小。

原子化 CSS的优点:

高度灵活:可以轻松定制和组合各种原子样式,满足不同项目的独特需求。

高效简洁:通过简洁的类名来快速应用样式,减少了 CSS 文件的体积和复杂性。

快速响应:能够快速适应设计变更,只需要添加或修改相应的类即可。

例如,你可以通过添加诸如 m-4(表示外边距为 4 个单位)、p-2(表示内边距为 2 个单位)、text-red-500(表示文字颜色为特定的红色)等类名来快速实现具体的样式效果。UnoCSS 为前端开发带来了更高效、便捷的样式管理方式,有助于提高开发效率和代码质量。

二 使用

1.初始化一个vite项目

三种方式选择其中一种

  • pnpm create vite unocss-demo -- --template vue-ts
  • npm init vite@latest unocss-demo -- --template vue
  • yarn create vite unocss-demo --template vue
2.下载Unocss依赖

npm install -D unocss

3.配置vite.config.ts

// vite.config.ts
import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    UnoCSS({ /* options */ }),
  ],
}

4.main.ts引入

import 'uno.css'

5.安装UnoCSS扩展

如果安装插件智能提示不生效,参考网址UnoCSS 插件智能提示不生效解决_unocss插件不提示-CSDN博客

6.实现效果

  • 8
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值