您现在的位置是:首页 >技术教程 >【Vue工程】010-UnoCSS 即时按需原子 CSS 引擎网站首页技术教程
【Vue工程】010-UnoCSS 即时按需原子 CSS 引擎
简介【Vue工程】010-UnoCSS 即时按需原子 CSS 引擎
【Vue工程】010-UnoCSS 即时按需原子 CSS 引擎
文章目录
一、概述
1、简介
UnoCSS 是一个轻量级、可扩展和零配置的 CSS 框架,旨在提供简洁、灵活且高效的样式开发体验。它遵循类似于 Tailwind CSS 的原则,通过使用类名来应用样式,从而提供快速而直观的样式编写方式。
UnoCSS 的设计目标是提供最小化的样式,同时保持灵活性和可定制性。它提供了一组基础样式规则和常用的样式变体,如边框、背景、文字、布局等,可以轻松地在项目中使用。
与其他 CSS 框架不同的是,UnoCSS 不包含任何默认主题或设计样式,这使得它非常适合定制化和与现有设计系统的集成。你可以根据项目的需求自由地定义样式和配色方案,以实现完全定制化的外观和风格。
除了基本样式规则外,UnoCSS 还提供了一些可选的预设(presets),如 Uno、Mini、Wind、Attributify、Tagify、Icons、Web Fonts、Typography 和 Rem-to-px。这些预设提供了一些常见的样式和功能,可以根据需要进行选择和集成。
UnoCSS 通过提供零配置的使用方式,使得它非常易于上手和集成到现有项目中。它还支持响应式设计,可以轻松地创建适应不同屏幕尺寸和设备的样式。
总而言之,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'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
UnoCSS(),
],
})
3、根目录创建 uno.config.ts
import { defineConfig, presetAttributify, presetUno } from 'unocss';
export default defineConfig({
/** 排除 */
exclude: ['node_modules'],
/** 预设 */
presets: [
/** 属性化模式 & 无值的属性模式 */
presetAttributify(),
/** 默认预设 */
presetUno(),
],
/** 自定义规则 */
rules: [
['zb-text', { color: 'blue' }],
['zb-fs', { 'font-size': '28px' }],
['zb-fb', { 'font-weight': 'bolder' }],
],
/** 自定义快捷方式 */
shortcuts: {
'zb-t': 'zb-text zb-fs zb-fb',
},
});
4、在 main.ts
中引入
import 'virtual:uno.css'
5、VS Code 安装 UnoCSS 插件
6、在组件中使用
<template>
<div class="zb-text zb-fs zb-fb">UnoCSS</div>
<div class="zb-t">快捷方式</div>
</template>
<script lang="ts" setup></script>
<style lang="scss" scoped></style>
7、访问 http://localhost:5173/home
三、预设
https://unocss.dev/presets/
Package | Description |
---|---|
@unocss/preset-uno | 默认预设 |
@unocss/preset-mini | 精简但必要的规则和变体 |
@unocss/preset-wind | Tailwind / Windi CSS 紧凑预设 |
@unocss/preset-attributify | 启用属性化模式以适用其他规则 |
@unocss/preset-tagify | 启用标签化模式以适用其他规则 |
@unocss/preset-icons | 由 Iconify 提供支持的纯 CSS 图标解决方案 |
@unocss/preset-web-fonts | 网页字体支持(Google Fonts 等) |
@unocss/preset-typography | 排版预设 |
@unocss/preset-rem-to-px | 将 rem 转换为 px 以供实用工具使用 |
风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。