【Vue工程】010 |
您所在的位置：网站首页 › vivos10原子组件 › 【Vue工程】010 |
【Vue工程】010
|
【Vue工程】010-UnoCSS 即时按需原子 CSS 引擎 文章目录【Vue工程】010-UnoCSS 即时按需原子 CSS 引擎一、概述1、简介2、官网二、基本使用1、安装2、修改 `vite.config.ts`3、根目录创建 `uno.config.ts`4、在 `main.ts` 中引入5、VS Code 安装 UnoCSS 插件6、在组件中使用7、访问 `http://localhost:5173/home`三、预设 一、概述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 unocss2、修改 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 插件
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 以供实用工具使用
|
【本文地址】
今日新闻 |
推荐新闻 |