vue3项目 引入unocss原子化

unocss是一个即时的原子CSS引擎,它可以让你用简短的类名来控制元素的样式,而不需要写复杂的CSS代码。

当然,原子样式也有很多选择,最著名的就是 Tailwind。但由于Tailwind 会生成大量样式定义,会导致全量的 CSS 文件往往体积会多至数 MB,从而有性能上有一些不足
  • 安装unocss
npm i unocss -S
  • 在vite.config.ts 中进行引入
import unoCss from 'unocss/vite'export default defineConfig({plugins: [unoCss({rules:[// 定义了flex,red 即可直接使用 ['flex',{display:'flex'}],['red',{color:'red'}]]})],})
  • main.ts 中引入
/* .... */import 'uno.css'/* .... */
  • App.vue 中 使用
<template><div class="flex red">unocss</div>
</template>
  • 在vite.config.ts 中也可以增加一些预设
/*** presetIcons: 加载icon图标* presetAttributify: 代码中如m-1可以直接写m="1"* presetUno: 兼容了tailwindcss,可以直接使用里面的class*/
import { presetIcons, presetUno, presetAttributify } from 'unocss'// 用法:export default defineConfig({plugins: [unoCss({presets:[presetIcons(),presetAttributify(),presetUno()],rules:[// 定义了flex,red 即可直接使用 ['flex',{display:'flex'}],['red',{color:'red'}]]})],
})
  • 使用图标的话,需要安装
    图标网址:https://icones.js.org
// 后面跟的/ic 根据自己使用的图标集合来决定,按需引入下载
npm i -D @iconify-json/ic// 使用
// bg-gray-100 对应presetUno预设
// m="10" 对应presetAttributify预设
// class="i-ic-baseline-alarm-on" 对应presetIcons预设
<template><div class="cike bg-gray-100" m="10">unocss</div><div class="i-ic-baseline-alarm-on"></div>
</template>

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

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

相关文章

动态规划 Leetcode 674 最长连续递增序列

最长连续递增序列 Leetcode 300 学习记录自代码随想录 要点&#xff1a;1.dp[i]定义为nums[i]结尾的连续最长递增蓄力&#xff0c;则正向遍历&#xff0c;递推时&#xff0c;如果是连续序列&#xff0c;则只比较nums[i]和nums[i-1]&#xff0c;若是可以不连续则可以&#xf…

组蛋白脱乙酰酶介导的胃癌肿瘤微环境特征及协同免疫治疗(多组学文献学习)

目录 ①HDAC转录组多数据NMF一次聚类 ②ACRG队列中HDAC单独NMF聚类 ③HDS评分在胃癌中的临床特征和基因组特征 ④高 HDS 可能提示胃癌的“热”肿瘤状态 ⑤HDS是胃癌免疫治疗效果的有力预测指标 ⑥单细胞转录组测序揭示了高HDS和低HDS患者的TME ⑦内皮细胞和成纤维细胞可…

Unity LineRenderer的基本了解

在Unity中&#xff0c;LineRenderer组件用于在场景中绘制简单的线条。它通常用于绘制轨迹、路径、激光等效果。 下面来了解下它的基本信息。 1、创建 法1&#xff1a;通过代码创建 using UnityEngine;public class CreateLineRenderer : MonoBehaviour {void Start(){// 创…

工作总结5

1.taro框架使用map标签出现的错误 这个问题困扰很长时间&#xff0c;在频繁切换页面渲染的时候出现左边不显示&#xff0c;我理解的是变量没有到达map标签的属性上&#xff0c;那我就想是不是setState太慢了&#xff0c;然后又用了变量&#xff0c;本地缓存等&#xff0c;都没有…

math模块篇(八)

文章目录 math.cosh(x)math.sinh(x)math.tanh(x) math.cosh(x) math.cosh(x) 是 Python 中 math 模块的一个函数&#xff0c;用于计算给定数值 x 的双曲余弦值。双曲余弦函数是双曲函数的一部分&#xff0c;它与普通的余弦函数有类似的性质&#xff0c;但定义在双曲空间中。 …

接口自动化框架搭建(四):pytest的使用

1&#xff0c;使用说明 网上资料比较多&#xff0c;我这边就简单写下 1&#xff0c;目录结构 2&#xff0c;test_1.py创建两条测试用例 def test_1():print(test1)def test_2():print(test2)3&#xff0c;在pycharm中执行 4&#xff0c;执行结果&#xff1a; 2&#xff0…

得物 AIGC 算法岗(日常实习生) 面经分享

节前&#xff0c;我们组织了一场算法岗技术&面试讨论会&#xff0c;邀请了一些互联网大厂朋友、参加社招和校招面试的同学&#xff0c;针对算法岗技术趋势、大模型落地项目经验分享、新手如何入门算法岗、该如何准备、面试常考点分享等热门话题进行了深入的讨论。 最大的感…

Taskflow:子流任务(Subflow Tasking)

创建Subflow DAG任务中&#xff0c;有一种常见的场景&#xff0c;一个任务可能在执行期间产生新的任务&#xff0c;然后紧接着执行新任务。 之前提到的静态图就没有办法实现这样一个功能了&#xff0c;所以Taskflow提供了另一种流的节点&#xff1a;Subflow&#xff0c;Subflo…

node.js学习(2)

版权声明 以下文章为尚硅谷PDF资料&#xff0c;B站视频链接&#xff1a;【尚硅谷Node.js零基础视频教程&#xff0c;nodejs新手到高手】仅供个人学习交流使用。如涉及侵权问题&#xff0c;请立即与本人联系&#xff0c;本人将积极配合删除相关内容。感谢理解和支持&#xff0c;…

AQS的基本原理

AQS&#xff08;AbstractQueuedSynchronizer&#xff09;是一个用于构建锁和同步器的框架&#xff0c;许多同步器都可以通过AQS很容易并且高效的构造出来。不仅Reentrant和Semaphore是基于AQS构建的&#xff0c;还包括CountDownLatch、ReentrantReadWriteLock、SynchronousQueu…

ttkbootstrap界面美化系列之Notebook(四)

在简单的界面设计中&#xff0c;Notebook也是常用的组件之一&#xff0c;Notebook组件的引入可以根据标签来切换不同的界面。使得界面更有层次感&#xff0c;不必都挤在一个界面上。在tkinter中就有Notebook组件&#xff0c;在ttkbootstrap中&#xff0c;同样也对Notebook进行了…

周末总结(2024/03/30)

工作 接受破烂现状&#xff0c;改变状态 上周一周的工作都感觉是摸鱼状态&#xff0c;每天只有三个小时左右的时间聚焦在工作上&#xff0c;其他时间都在胡思乱想。但是我发现可以在工作中学习和下班相关的技术栈。我无意改变自己的工作状态&#xff0c;只想在5月底找好下家然后…

应用侧渲染流程

应用侧渲染流程 《Android应用程序UI硬件加速渲染环境初始化过程分析》 https://blog.csdn.net/Luoshengyang/article/details/45769759 《Android HWUI绘制流程》 https://wizzie.top/android/android_HWUI_Draw/#1-gpu%E6%B8%B2%E6%9F%93%E7%A1%AC%E4%BB%B6%E5%8A%A0%E9%…

Linux+ARM 简单环境检测---软件部分

1、前言 这个是我学习linuxARM的在做的第一个软硬件结合项目&#xff0c;以往的类似这种整体类项目还是光单片机的时候&#xff0c;linux软件部分学习了差不多快一年了&#xff0c;因为各种事情耽搁&#xff0c;这个项目一直没有静下心来完成&#xff0c;不过终于哈哈哈哈搞完了…

代码随想录——移除元素(Leetcode27)

题目链接 暴力&#xff1a;&#xff08;没有改变元素相对位置&#xff09; class Solution {public int removeElement(int[] nums, int val) {int len nums.length;for(int i 0; i < len; i){if(nums[i] val){for(int j i 1; j < len; j){nums[j-1] nums[j];}i…

VS2019连接MySQL

VS2019连接MySQL 下载MySQL Connector/C配置头文件&#xff0c;库文件路径配置头文件路径配置库的路径复制dll文件 MySQL的用户设置将权限赋值给新用户 编写代码往数据库写入 老师布置的作业让我们用VS2019连接MySQL实现一个小型的日志系统&#xff0c;中间踩了很多的坑&#x…

chatui工具使用记录与比较

概述 cahtui相关工具可谓是层出不穷&#xff0c;方便了我们使用各个大模型。这里我把我知道的整理下列出来&#xff0c;顺便做一比较。 简单比较 openWebUI&#xff0c;star 11.1k&#xff0c;仿chatgpt风格&#xff0c;支持openapi、可以对接Ollama进行对话&#xff0c;功能…

Finetuned Language Models Are Zero-Shot Learners

Abstract 本文探索了一种简单的方法来提升语言模型的零样本(zero-shot)学习能力。我们发现 指令微调(instruction tuning) 显著提高了未见任务的零样本性能。 指令微调:即在一组通过指令描述的数据集上对模型进行微调我们对一个 137B 参数的预训练模型在 60 个 NLP 任务上…

springboot婚庆系统

摘 要 随着科学技术的飞速发展&#xff0c;各行各业都在努力与现代先进技术接轨&#xff0c;通过科技手段提高自身的优势&#xff1b;对于婚庆系统当然也不能排除在外&#xff0c;随着网络技术的不断成熟&#xff0c;带动了婚庆系统&#xff0c;它彻底改变了过去传统的管理方式…

【Gitea的介绍】

&#x1f525;博主&#xff1a;程序员不想YY啊&#x1f525; &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家&#x1f4ab; &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 &#x1f308;希望本文对您有所裨益&#xff0c;如有…