原子化CSS(Atomic CSS)

UnoCSS,它不是像TailWind CSS和Windi CSS属于框架,而是一个引擎,它没有提供预设的原子化CSS工具类。引用自掘金,文章中实现相同的功能,构建后的体积TailWind 远> Windi > UnoCSS,体积会小很多。

像这种原子性的CSS应该在大公司会用到吧!目前还没用过,用过的都说好用,没用过的人说它代码太多了,下面就单纯实现下如何在项目中使用UnoCSS。

首先使用vite新建一个vue项目模板;

然后看上方掘金文章的下部分,就可以使用UnoCSS了

相关推荐
rkmhr_sef35 分钟前
Go-Gin Web 框架完整教程
前端·golang·gin
猫猫村晨总39 分钟前
基于TensorFlow.js与Web Worker的智能证件照生成方案
前端·tensorflow·vue3
Ama_tor44 分钟前
网页制作08-html,css,javascript初认识のhtml使用框架结构,请先建立站点!
前端·css
桂月二二1 小时前
基于模块联邦的微前端架构:重构大型前端应用的模块化边界
前端·重构·架构
Alang1 小时前
Antd table 无限滚动+懒加载
前端·javascript·react.js
Cutey9162 小时前
Vue 3 中的 ref 和 reactive
前端·面试
前端没钱2 小时前
日报列表滚动到哪里、哪里就自动变成已读状态
前端·vue.js
从谷底向上2 小时前
前端面试题:浏览器两个 tab 都是同域,如何在一个tab 向另一个 tab 发消息
前端·面试
lc_front_developer2 小时前
为什么使用Knex 做为 Express 中操作 MySQL 数据库的方案?
前端·node.js
❆VE❆3 小时前
vue3: directive自定义指令防止重复点击
前端·javascript·vue.js·自定义指令·directive