Hbuilder创建的项目(uniApp + Vue3)中引入UnoCSS原子css引擎

news2024/9/28 3:26:09

这里是UnoCSS的官网介绍

UnoCS通过简化和优化CSS的编写过程来提高Web开发的效率和可维护性。好处是:

  • 提升开发效率
  • 提升开发效率
  • 提高一致性
  • 增强灵活性
  • 易于维护
  • 方便的集成与配置

同时还支持预设变量和规则。这些可参看官网进行配置。Unocss通过其原子化方法、高度的可定制性和强大的集成能力,为开发提供了一个高效、灵活且易于维护的CSS。

使用

1. 安装
// 安装
// 目前时间点来说推荐0.58.9 因为还要集成uviewplus,高版本会出现报错不兼容

npm i unocss@0.58.9 unocss-preset-weapp -D
2. 创建文件 uno.config.ts 和 unocss.config.ts 文件
// uno.config.ts

import { defineConfig } from 'unocss'

export default defineConfig({
    // 这里可以配置其他变量和规则
})
// unocss.config.ts

import presetWeapp from 'unocss-preset-weapp'

import { transformerClass, transformerAttributify } from 'unocss-preset-weapp/transformer';

export default ({
  presets: [
    presetWeapp()
  ],
  transformers: [
    transformerAttributify(),
    transformerClass()
  ],
  shortcuts: []

})
3. main.js/ts中引入
// ....

import 'uno.css'

// ...
4. 使用

已经可以使用了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2088523.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

STL-常用算法

概述&#xff1a; 算法主要由头文件<algorithm><functional><numeric>组成<algorithm>是所有STL头文件最大的一个&#xff0c;范围涉及到比较&#xff0c;交换&#xff0c;遍历操作&#xff0c;复制&#xff0c;修改等<numeric>体积很小&#x…

华硕天选Air:开学季的性价比之巅

正值开学季&#xff0c;华硕天选Air全能本以8999元的首发价回归&#xff0c;为学生和需求高性能笔记本的用户带来了超值的选择。 这款笔记本以其轻薄设计和强悍性能&#xff0c;成为市场上的热点。 轻薄设计&#xff0c;潮流先锋 华硕天选Air 2024采用了全新模具设计&#xf…

如何选择生信云服务器

少走弯路,高效分析;了解生信云,访问 【生信圆桌x生信专用云服务器】 : www.tebteb.cc 生物信息学&#xff08;生信&#xff09;分析的需求日益增加&#xff0c;选择一款合适的生信云服务器变得尤为重要。一个优秀的生信云服务器不仅能够提供强大的计算能力和灵活的存储空间&…

【数据结构】排序算法篇一

【数据结构】排序算法篇一 1. 插入排序&#xff08;1&#xff09;基本思想&#xff1a;&#xff08;2&#xff09;动态图解&#xff1a;&#xff08;3&#xff09;具体步骤&#xff1a;&#xff08;4&#xff09;代码实现&#xff1a;&#xff08;5&#xff09;特性总结&#x…

数据治理下的主数据管理与KPaaS的应用

在2024中国国际大数据产业博览会&#xff08;简称“数博会”&#xff09;上&#xff0c;数据治理作为大数据领域的热点主题之一&#xff0c;引起了广泛关注。这一议题之所以成为焦点&#xff0c;是因为在数字化时代&#xff0c;数据已经上升为企业最具价值的战略资源之一。随着…

【区块链 + 智慧文旅】城商行旅游金融联盟:旅游金融联盟平台 | FISCO BCOS应用案例

深圳优讯基于FISCO BCOS搭建面向联盟成员间使用的开 放式客户服务平台&#xff0c;平台于2018年6月底上线。 成员机构之间共享产品、流量、征信和金融资源&#xff0c;整合旅游产业链资源&#xff0c;实现跨地域的旅游金融协作。

【STM32单片机_(HAL库)】3-3【中断EXTI】使用SysTick模拟多线程

1.硬件 STM32单片机最小系统 LED灯模块 硬件接线 STM32LED1LED2PB8负极PB9负极5V5V5V 2.软件 led、tasks驱动文件添加GPIO常用函数main.c程序 #include "sys.h" #include "delay.h" #include "led.h" #include "tasks.h"int mai…

.NET HandyControl 深度解析:一个现代化的UI控件库

文章目录 前言一、选择HandyControl的原因二、如何使用HandyControl1.安装HandyControl2.使用代码例子 总结 前言 在.NET开发领域&#xff0c;UI&#xff08;用户界面&#xff09;设计的美观性和易用性对于应用程序的成功至关重要。为了帮助开发者快速构建现代化、美观且用户友…

日常避坑指南:重试装饰器的正确使用方式

在日常开发中,重试机制是提高代码健壮性的重要手段之一,尤其是在处理网络请求时,遇到超时或临时性错误的情况并不少见。通过重试,我们可以在一定程度上降低这些临时问题带来的影响。然而,如果使用不当,重试机制本身也可能引发新的问题,甚至让问题更加难以排查。 问题背…

Framework | Android语音识别框架与语音交互概览

Framework | Android语音识别框架与语音交互概览 随着智能设备的普及,语音识别与语音交互技术在现代生活中扮演着越来越重要的角色。无论是在驾驶场景中解放用户的双手,还是在智能家居中通过语音控制设备,语音技术的应用场景已经深入到各个领域。本文将深入探讨Android平台…

Live800:数字化转型下的客户服务新生态

在数字化转型的浪潮中&#xff0c;企业客户服务领域正经历着前所未有的变革。数字技术如大数据、云计算、人工智能和物联网等&#xff0c;不仅重塑了企业的运营模式&#xff0c;更深刻地改变了客户服务的面貌&#xff0c;构建了一个全新的客户服务生态。 一、数字化转型的驱动力…

在docker中安装skywalking + es

ES的版本和官网 es版本&#xff1a; Past Releases of Elastic Stack Software | Elastic es版本logstash版本JDK版本对应关系 支持一览表 | Elastic skywalking的版本说明和官网 Advanced deployment | Apache SkyWalking skywalking和es的对应关系&#xff0c;在网页的…

实训第三十二天(学习playbook-roles,脚本创建数据库和表,mycat读写分离)

1、roles&#xff08;角色&#xff09;介绍 roles(⻆⾊): 就是通过分别将variables, tasks及handlers等放置于单独 的⽬录中,并可以便捷地调⽤它们的⼀种机制。 假设我们要写⼀个playbook来安装管理lamp环境&#xff0c;那么这个 playbook就会写很⻓。所以我们希望把这个很⼤的…

Native开发与逆向第二篇 - 动态注册函数逆向

ida静态分析 示例app是网上找的一个杀毒软件&#xff0c;做安全的app防护应该是OK的。 直接找到JNI_OnLoad 类名没处理&#xff0c;直接是明文。 jint JNI_OnLoad(JavaVM *vm, void *reserved) {jint v2; // w19__int64 v4; // [xsp0h] [xbp-30h] BYREFqword_25148 vm;if ( …

全免费的数据恢复工具推荐!这几个不容错过!

不小心的数据丢失总会带来许多困扰&#xff0c;不过这些困扰也能通过一些全免费的数据恢复工具解决。接下来&#xff0c;就来给大家介绍几款好用的数据恢复工具&#xff01; 第一款&#xff1a;福昕数据恢复 直达链接&#xff1a;www.pdf365.cn/foxit-restore/ 福昕数据恢复…

6.2K star!推荐一款开源混沌工程测试平台:Chaos Mesh

1、Chaos Mesh 介绍 Chaos Mesh是一个开源的混沌工程平台&#xff0c;旨在帮助用户在生产环境中测试、验证和优化其应用程序的可靠性和稳定性。通过引入故障注入和混沌工程原则&#xff0c;Chaos Mesh可以模拟各种故障场景&#xff0c;如网络延迟、节点故障、磁盘故障等&#…

【spring】学习笔记1:starter和application

https://spring.io/toolsSpring Boot Extension Pack vs版本 使用Spring Tool Suite初始化Spring项目

如何将本地的hexo博客部署到云服务器

云服务器系统&#xff1a;centos 7 本地电脑 mac 第一步&#xff1a; 初始化Hexo博客 npm install hexo-cli -g hexo init HexoBlog 注意node版本需要16以上 cd HexoBlog hexo server访问地址localhost:4000 云服务器执行以下操作 配置的ssh访问用户 useradd git passw…

知网硕士论文稿酬领取方式

目录 知网硕士论文稿酬领取方式: 建议:版税制付酬 版税 知网 学位年度2008年(含2008年)以后的稿酬标准 知网硕士论文稿酬领取方式: 建议:版税制付酬 你怎么能把自己看死了,以后有大用。 中国知网是由清华大学、清华同方发起,始建于1999年6月,是以实现全社会知识…

一文300字从0到1使用Postman轻松搞定文件上传测试!

postman经常用于接口测试&#xff0c;但是上传文件参数还是蛮复杂的&#xff0c;记录下过程 01、上传文件参数 1.选择请求方式 选择post请求方式&#xff0c;输入请求地址 2.填写Headers Key&#xff1a;Content-Type &#xff1b; Value&#xff1a;multipart/form-data …