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

这里是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.tsimport { defineConfig } from 'unocss'export default defineConfig({// 这里可以配置其他变量和规则
})
// unocss.config.tsimport 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.rhkb.cn/news/412816.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第二证券:静态市盈率与动态市盈率有什么区别?

市盈率(PE),是指投资者愿意为每一元净利润所支付的价格。 股票的市盈率股票价格(P)/每股净利润(EPS),或者用公司其时总市值/公司上一年总净利润。 动态市盈率与静态市盈率的区别&a…

<数据集>遥感航拍飞机和船舶和识别数据集<目标检测>

数据集格式:VOCYOLO格式 图片数量:19973张 标注数量(xml文件个数):19973 标注数量(txt文件个数):19973 标注类别数:2 标注类别名称:[ship,plane] 序号类别名称图片数框数1ship17575416292plane239815…

对比 PDAF、CDAF 和 LAAF 自动对焦技术

深入解析相位检测自动对焦(PDAF) 相位检测自动对焦(PDAF,Phase Detection Auto Focus)是一种高效的自动对焦技术,广泛应用于现代数码相机、无反相机和智能手机摄像头中。为了更好地理解 PDAF,我…

基于协同过滤算法的电影推荐系统的设计与实现(论文+源码)_kaic

摘 要 现在观看电影已逐渐成为人们日常生活中最常见的一种娱乐方式,人们通常会在周末或在休息、吃饭时间不由自主地在各种视频软件中搜索当前火热的影视节目。但是现在的视频软件电影推荐功能不够完善,所以需要开发出一套系统来使用户只需要简单操作就能…

华为云征文|部署私有云和文档管理系统 Kodcloud

华为云征文|部署私有云和文档管理系统 Kodcloud 一、Flexus云服务器X实例介绍1.1 云服务器介绍1.2 应用场景1.3 对比普通ECS 二、Flexus云服务器X实例配置2.1 重置密码2.2 服务器连接2.3 安全组配置 三、部署 Kodcloud3.1 Jellyfin 介绍3.2 Docker 环境搭建3.3 Jell…

【智能算法改进】路径规划问题的多策略改进樽海鞘群算法研究

目录 1.算法原理2.改进点3.结果展示4.参考文献5.代码获取 1.算法原理 【智能算法】樽海鞘群算法(SSA)原理及实现 2.改进点 无标度网络策略 复杂网络在图论中可以用边和节点表示, Barabasi 等于1999年通过分析大量的数据提出了无标度网络模型. 该网络…

人像比对-人证比对-人脸身份证比对-人脸身份证实名认证-人脸三要素对比-实人认证

​ 人证比对API接口,全称为人脸身份证比对API接口,也被称为人脸实名认证API接口或实人认证API接口。这种接口服务主要用于将提供的人脸图片和对应的身份证照片、姓名、身份证号码进行比对,以此验证用户的身份。以下是关于人证比对API接口的详…

[易聊]软件项目测试报告

一、项目背景 随着互联网发展,各种各样的软件,比如游戏、短视频、购物软件中都有好友聊天功能,这是一个可在浏览器中与好友进行实时聊天的网页程序。“ 易聊 ”相对于一般的聊天软件,可以让用户免安装、随时随地的通过浏览器网页…

UDP英译汉网络词典

这里我们用UDP实现一个简单的英译汉小词典。我们还是仿照前一篇的UDP编程,将各自的组件封装起来,实现高内聚低耦合。 一. 字典翻译功能实现 首先我们将我们的字典知识库放在txt文本中。 apple: 苹果 banana: 香蕉 cat: 猫 dog: 狗 book: 书 pen: 笔 ha…

浮毛粘毛器可以彻底去除吗?独家揭秘值得入手浮毛空气净化器

有没有养猫五年以上还是单猫的铲屎官?能不能分享一下怎么才能控制住不养新猫。 从我养第一只猫开始,每次看到别人家的小幼猫,就控制不住的想养。到现在,家里已经有了7只猫,而前段时间楼下那只小三花又差点让我破例。不…

Keil5 Debug模式Watch窗口添加的监控变量被自动清除

Keil5 Debug模式Watch窗口添加的监控变量被自动清除 问题解决记录 问题描述:每次进入Debug模式时,watch窗口里面上一次调试添加的监控变量都会被全部清掉 如图: 退出Debug模式后,重新进入Debug模式: 解决方法&…

INFO:一种基于向量加权平均的高效优化算法【免费获取Matlab代码】

目录 1.背景2.算法原理2.1算法思想2.2算法过程 3.结果展示4.参考文献5.代码获取 1.背景 2022年,I Ahmadianfar受到基于向量加权平均方法启发,提出了加权平均向量优化算法(weIghted meaN oF vectOrs, INFO)。 2.算法原理 2.1算法…

在线任务分发系统开发架构分析

在线任务分发系统的架构分析是一个综合性的过程,涉及多个技术层面和功能模块的设计。以下是对在线任务分发系统架构的详细分析: 一、系统概述 在线任务分发系统是一个集任务发布、分配、执行、监控及反馈于一体的综合平台,它通过互联网技术实…

超详细带你学习go高性能web框架----fiber

go-fiber-fast go-fiber 主要定位为一个轻量级、高性能的 Web 框架,但其灵活性使得它可以通过与其他库的集成,构建出强大而多功能的应用程序,满足不同的业务需求,和gin一样轻量级别的路由,但是性能特别是极端性能比gin好一些,都可以通过整合其…

【Gradle】window下安装gradle及idea配置

gradle安装与配置 背景基本概念下载配置环境变量idea配置构建命令配置全局的镜像仓库 背景 最近在看spring源码时,Spring5 以后都是采用 Gradle 来编译,所以构建源码前先安装 Gradle 环境。 基本概念 Gradle是一个基于Apache Ant和Apache Maven概念的…

优化农业项目流程 10款实用管理系统推荐

国内外主流的 10 款农业建设管理系统对比:PingCode、Worktile、建米农业工程项目管理系统、泛普软件的农业项目管理系统、开创云数字农业管理平台、Trimble Ag Software、Agworld、FarmLogs、Granular、Conservis。 在管理复杂的农业建设项目时,选择合适…

LuaJit分析(三)luajit字节码文件格式

Luajit字节码文件格式的完整信息如上图所示,包括文件头Header和原型Proto,一个原型可以对应lua源码中的一个函数或源文件。一、文件头文件标志:占用三个字节,始终是0x1B4C4A,表示这是一个luajit文件版本:占…

时序预测 | 基于VMD-SSA-LSSVM+LSTM多变量时间序列预测模型(Matlab)

目录 效果一览基本介绍程序设计参考资料 效果一览 基本介绍 旧时回忆,独此一家。基于VMD-SSA-LSSVMLSTM多变量时间序列预测模型(Matlab) ——————组合模型预测结果—————————— 预测绝对平均误差MAE LSTM VMDSSALSSVM 组合模型 …

Java项目:基于SpringBoot+mysql在线拍卖系统(含源码+数据库+答辩PPT+毕业论文)

一、项目简介 本项目是一套基于SSM框架mysql在线拍卖系统 包含:项目源码、数据库脚本等,该项目附带全部源码可作为毕设使用。 项目都经过严格调试,eclipse或者idea 确保可以运行! 该系统功能完善、界面美观、操作简单、功能齐全、…

基层医疗云HIS系统源码:云计算、大数据等现代信息技术研发

云HIS源码,基层云HIS系统源码,基层医疗云HIS系统 利用云计算、大数据等现代信息技术研发的基层医疗云HIS系统实现了医院信息化从局域网向互联网转型,重新定义医疗卫生信息化建设的理念、构架、功能和运维体系。实现了医院信息化由局域网向互…