- 综合排序
- 最热优先
- 最新优先
- 来自专栏快乐阿超
unocss
——柳永《鹤冲天》 分享一个css框架unocss 可以通过class规则，生成对应样式，例如通过m-1生成margin: 0.25rem 而且规则可以通过 https://uno.antfu.me
97830编辑于 2023-01-01 - 来自专栏前端Q
原子CSS引擎——unocss
什么是unocss unocss是一个即时的原子CSS引擎，它可以让你用简短的类名来控制元素的样式，而不需要写复杂的CSS代码。 当然，原子样式也有很多选择，最著名的就是 Tailwind。 项目中使用 unocss 参考 官方文档Vite配置，webpack 往下翻即可 ❝https://unocss.dev/integrations/vite ❞ 安装 npm install -D unocss 打包配置 vite配置 // vite.config.js import UnoCSS from 'unocss/vite' import { defineConfig } from 'vite' UnoCSS = require('@unocss/webpack').default module.exports = { plugins: [ UnoCSS(), ], optimization : { realContentHash: true, }, } webopack4中配置 // webpack.config.js const UnoCSS = require('@unocss
2.6K30编辑于 2023-09-22 - 来自专栏希里安
UnoCSS图标+Redis安装使用
--https://www.theregister.com/2023/10/10/microsoft_says_vbscript_will_be/ 使用UnoCSS图标 先看看效果： 安装 pnpm add -D @unocss/preset-icons @iconify-json/[the-collection-you-want] 在根目录创建uno.config.ts // uno.config.ts import { defineConfig } from 'unocss' import presetIcons from '@unocss/preset-icons' export default
53230编辑于 2023-10-30 - 来自专栏前端自习课
【总结】1839- 原子CSS引擎——unocss
什么是unocss unocss是一个即时的原子CSS引擎，它可以让你用简短的类名来控制元素的样式，而不需要写复杂的CSS代码。 当然，原子样式也有很多选择，最著名的就是 Tailwind。 项目中使用 unocss 参考 官方文档Vite配置，webpack 往下翻即可 ❝https://unocss.dev/integrations/vite ❞ 安装 npm install -D unocss 打包配置 vite配置 // vite.config.js import UnoCSS from 'unocss/vite' import { defineConfig } from 'vite' UnoCSS = require('@unocss/webpack').default module.exports = { plugins: [ UnoCSS(), ], optimization : { realContentHash: true, }, } webopack4中配置 // webpack.config.js const UnoCSS = require('@unocss
2.1K10编辑于 2023-10-24 - 来自专栏各类技术文章~
unocss，（原子化css），项目初体验
unocss 简单介绍 原子化 CSS 是一种 CSS 的架构方式，它倾向于小巧且用途单一的 class，并且会以视觉效果进行命名。 UnoCSS 是一个引擎，而非一款框架，因为它并未提供核心工具类，所有功能可以通过预设和内联配置提供。 ---- unocss 其实就是提供所有你可能需要用到的 CSS 工具。 结合Vite的按需加载的理念，unocss提供所见即所得的使用方式。并且提供插件预设进行增强，我们可以使用自定义规则进行rule校验，增加个人开发的方式。 简单上手 安装 npm i -D unocss@latest 复制代码 or yarn add -D unocss@latest 复制代码 引用 // vite.config.ts import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import Unocss from 'unocss/vite' // https://vitejs.dev
6.9K00发布于 2021-11-06 - 来自专栏全栈开发工程师
【Vue工程】010-UnoCSS 即时按需原子 CSS 引擎
【Vue工程】010-UnoCSS 即时按需原子 CSS 引擎 一、概述 1、简介 UnoCSS 是一个轻量级、可扩展和零配置的 CSS 框架，旨在提供简洁、灵活且高效的样式开发体验。 2、官网 官网 https://unocss.dev/ 文档 https://unocss.dev/integrations/vite 交互搜索 https://unocss.dev/interactive / 二、基本使用 1、安装 pnpm add -D unocss 2、修改 vite.config.ts // vite.config.ts import UnoCSS from 'unocss/vite /presets/ Package Description @unocss/preset-uno 默认预设 @unocss/preset-mini 精简但必要的规则和变体 @unocss/preset-wind @unocss/preset-icons 由 Iconify 提供支持的纯 CSS 图标解决方案 @unocss/preset-web-fonts 网页字体支持（Google Fonts 等） @unocss
54410编辑于 2025-01-06 - 来自专栏希里安
vue3+ts+vite+UnoCSS系列（二）
使用 安装： pnpm add -D unocss 安装插件： // vite.config.ts import UnoCSS from 'unocss/vite' import { defineConfig } from 'vite' export default defineConfig({ plugins: [ UnoCSS(), ], }) 创建一个uno.config.ts // uno.config.ts import { defineConfig } from 'unocss' export default defineConfig({ // ...UnoCSS options }) 添加 virtual:uno.css 到你的 main 入口: // main.ts import 'virtual:uno.css' 就可以愉快的使用UnoCSS了，可以在沙盒中试用： https ://stackblitz.com/fork/github/unocss/unocss/tree/main/examples/vite-vue3
59920编辑于 2023-10-30 UnoCSS即时按需引用的原子css引擎
什么是unocss？很多前端可能第一次听说这个词unocss是一个即时的原子CSS引擎，它可以让你用简短的类名来控制元素的样式，而不需要写复杂的CSS代码。 ❞使用场景和示例UnoCSS适用于快速开发和原型设计，特别适合需要快速迭代和灵活样式的项目。 unocss的优点它可以让你快速地开发和原型设计，而不需要考虑CSS的细节。它可以让你的CSS文件更小，因为它只生成你用到的工具类。它可以让你的CSS更一致，因为它遵循一套预设的规则和变量。 unocss中文文档：https://www.unocss.com.cn
63510编辑于 2025-04-23UnoCSS：新一代原子化 CSS 引擎全面解析
这使得 UnoCSS 成为一个对企业和个人开发者都非常友好的开源工具。 注：其官方预设（如 @unocss/preset-wind、@unocss/preset-icons 等）同样遵循 MIT 协议。 3. 安装及使用 以 Vite + Vue 为例 第一步：安装依赖 npm install -D unocss # 如需属性化模式或图标 npm install -D @unocss/preset-attributify '@vitejs/plugin-vue' import UnoCSS from 'unocss/vite' export default defineConfig({ plugins: [ 项目开源地址 • GitHub 主仓库：https://github.com/unocss/unocss • 官方文档： https://unocss.dev • 在线图标库（Icones）：https
14900编辑于 2026-06-01- 来自专栏前端框架
UnoCSS原子CSS引擎-新一代前端原子化框架
UnoCSS是一款原子化的即时按需 CSS 引擎，其中没有核心实用程序，所有功能都是通过预设提供的。默认情况下UnoCSS应用通过预设来实现相关功能。 UnoCSS中文文档：https://www.unocss.com.cn前有很多种原子化的框架，例如 Tailwind CSS，Windi CSS 以及 Tachyons 等。为什么要原子化 CSS？ 我们需要用到一些 Sass 内置的一些颜色处理函数，例如 mix、adjust-hue、change-color、scale-color、desaturate、transparentize等等总结感受：在使用 UnoCSS
75400编辑于 2025-07-14 - 来自专栏四楼没电梯
CSS 工具对比：UnoCSS vs Tailwind CSS，谁是你的菜？
然而，一个名为 UnoCSS 的新星正以其惊人的性能和极致的灵活性迅速崛起。 : 按需生成的原子化 CSS 引擎 UnoCSS 并非一个“框架”，而是一个原子化 CSS 引擎。 任意值支持：这是 UnoCSS 的一大杀手锏。你不再受限于配置文件，可以直接在类名中书写任意值。 代码实例：同样的卡片，更灵活的写法 使用 UnoCSS，你可以实现和 Tailwind 完全相同的效果。注意，如果你使用了 @unocss/preset-wind 预设，语法几乎一模一样。 如果你追求极致的开发体验和性能，那么 UnoCSS 绝对值得一试。它可能会彻底改变你对 CSS 工具的看法。
3.9K10编辑于 2025-06-10 - 来自专栏代码简单说
一文了解如何在 UniApp 中使用 UnoCSS 提升开发效率
最重要的一点是，UnoCSS 完全兼容 Tailwind CSS，你可以在项目中同时使用这两者，或者逐步过渡到 UnoCSS。 在 UniApp 中使用 UnoCSS 要在 UniApp 项目中使用 UnoCSS，首先需要进行一些基础配置。这里以 Vue 3 + UniApp 为例，带你快速上手。 安装 UnoCSS 使用 npm 或 yarn 安装 UnoCSS。 npm install unocss --save-dev 配置 UnoCSS 在项目根目录下创建一个 unocss.config.js 文件，并进行配置。 确保 UnoCSS 的配置文件正确无误，尤其是针对特定项目需求做出的自定义规则。 通过使用 UnoCSS，我的 UniApp 开发变得更加轻松和高效。
10200编辑于 2026-06-16 - 来自专栏前端食堂
前端食堂技术周刊第 35 期：Vitest 、Jest 28、Ant Design v4.20.0、Lerna 官宣停止维护
B 站【前端食堂】同步发送，想看视频的堂友可以先去看视频 本期摘要 Vitest v0.10.0 Jest 28 Ant Design v4.20.0 Chrome 101 Lerna 官宣停止维护 UnoCSS UnoCSS 交互式文档上线[6] 如果你还不知道 UnoCSS，可以通过下面这篇文章了解。 重新构想原子化 CSS[7] 下面我们来看技术资料。 github.com/ant-design/ant-design/releases/tag/4.20.0 [5] Lerna 官宣停止维护: https://github.com/lerna/lerna [6] UnoCSS
1.9K20编辑于 2022-05-25 JeecgUniapp全新版本3.0发布，采用uniapp+vue3最新架构
：Vscode、HBuilderX、Intellij IDEA最新技术栈：Uniapp + Vue3.0 + Vite + TypeScript + Wot-design-uni + pinia + unocss 构建工具 Webpack Vite，构建更快 Unocss 原子化 不支持 支持 Unocss 原子化 TypeScript 支持 不支持 支持 TS，提供类型提示
57610编辑于 2025-03-10- 来自专栏JVMGC
6.3K Star开源一个管理后台模板,好看的不行
它采用了最新的前端技术栈，包括 Vue3、Vite5、TypeScript、Pinia 和 UnoCSS。该模板内置了丰富的主题配置和组件，代码规范严谨，同时实现了自动化的文件路由系统。 功能特点： 1.前沿技术应用：采用最新流行的技术栈，如 Vue3、Vite5、TypeScript、Pinia 和 UnoCSS，使得项目具备现代化的特性。 5.丰富的主题配置：内置多样化的主题配置，与 UnoCSS 完美结合，使得界面样式能够满足不同用户的需求。 6.内置国际化方案：轻松实现多语言支持，使得软件能够应对不同语言的用户需求。
62610编辑于 2024-01-29 - 来自专栏前端实验室
强烈推荐一个极简风格的后台管理模板！
Vue Naive Admin 2.0 是一款极简风格的后台管理模板，包含前后端解决方案，前端使用 Vite + Vue3 + Pinia + Unocss，后端使用 Nestjs + TypeOrm 特性 使用 Vue3 主流最新技术栈: Vite + Vue3 + Pinia 使用 原子CSS框架: Unocss，优雅、轻量、易用 集成 Pinia 状态管理，支持状态持久化 使用主流的 iconify + unocss 图标方案，支持自定义图标，支持动态渲染 使用 Naive UI，极致简洁的代码风格和清爽的页面设计，审美在线，主题轻松定制 先进且易于理解的文件结构设计，多个模块之间零耦合，单个业务模块删除不影响其他模块
1.5K10编辑于 2024-01-26 - 来自专栏低代码平台
JeecgBoot Vue3前端项目性能优化&按需加载方案
note.youdao.com/s/YKUzG66Hjeecgboot 3.5.5 性能优化方案如何你是jeecgboot 3.5.5 之前的VUE3版本，可以参考我们已做过的优化进行改造1、按需加载改造2、UnoCSS 替代windicss3、升级vite44、build打包拆分PR提交首屏缩短至10秒多&打包时间缩短至一半，升级vite4和vue3.3打包优化默认index太大，自定义拆包策略UnoCSS替代windicss
69210编辑于 2024-03-11 - 来自专栏前端实验室
快看！如此清新优雅的后台管理系统你见过吗？
说她清新优雅也毫不过分，她就是——soybean-admin soybean-admin Soybean Admin 是一个基于 Vue3、Vite、TypeScript、NaiveUI、Pinia 和 UnoCSS vite2 等前端前沿技术开发, 使用高效率的 npm 包管理器 pnpm TypeScript: 应用程序级 JavaScript 的语言 主题：丰富可配置的主题、暗黑模式，基于原子 css 框架 - UnoCss
96540编辑于 2023-05-23 - 来自专栏开源服务指南
高效 UI 组件，节省开发时间 | 开源专题 No.70
unocss/unocsshttps://github.com/unocss/unocss Stars: 14.6k License: MIT 该项目是一个即时的按需原子 CSS 引擎，受到 Windi
1.1K10编辑于 2024-04-30 - 来自专栏趣谈前端
开源推荐! yite-cli, 基于vite的开箱即用的项目脚手架
项目架构 yite-cli @unocss/transformer-compile-class @unocss/transformer-directives @unocss/transformer-variant-group copy-anything fast-glob fs-extra lodash-es merge-anything portfinder rollup-plugin-visualizer tiny-cookie unocss
84420编辑于 2023-09-18
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号