您现在的位置是:首页 >技术教程 >【Vue工程】010-UnoCSS 即时按需原子 CSS 引擎网站首页技术教程

【Vue工程】010-UnoCSS 即时按需原子 CSS 引擎

訾博ZiBo 2024-06-17 10:14:00
简介【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 插件

image-20230512125922125

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

image-20230512132258084

三、预设

https://unocss.dev/presets/

PackageDescription
@unocss/preset-uno默认预设
@unocss/preset-mini精简但必要的规则和变体
@unocss/preset-windTailwind / 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 以供实用工具使用
风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。