vue3.2+vite+unocss原子化配置

news2024/10/6 0:32:40

1、安装unocss:npm install unocss

2、vite.config.ts中配置:

3、创建unocss自己的ts文件:uno.config.ts 根路径下创建,

4、在创建好的uno.config.ts文件中编写如下代码:

// uno.config.ts
import {
    defineConfig,
    presetAttributify,
    presetIcons,
    presetTypography,
    presetUno,
    presetWebFonts,
    transformerDirectives,
    transformerVariantGroup,
} from "unocss";

export default defineConfig({
    rules:[
        ['m-1',{margin:'5px',color:'#00ff00'}]
    ],
    shortcuts: [
        // ...
    ],
    theme: {
        colors: {
            // ...
        },
    },
    presets: [
        presetUno(),
        presetAttributify(),
        presetIcons(),
        presetTypography(),
        presetWebFonts({
            fonts: {
                // ...
            },
        }),
    ],
    transformers: [transformerDirectives(), transformerVariantGroup()],
});

5、开始使用:使用页面需要在script中导入:import 'uno.css'

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

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

相关文章

如果把软路由的网段更换成169.254.0.0/16会咋样?

前言 这几天有小伙伴在折腾软路由系统,然后问题就来了。 他咨询的是:为啥电脑连接软路由之后,无法访问软路由的管理页? 嗯。。。确实不是什么大事。但不注意看,还以为软路由没有正常获取到ip。 熟悉网络的小伙伴们都…

【统计推断】-01 抽样原理之(三)

文章目录 一、说明二、抽样分布三 均值抽样分布3.1 有限母体无放回抽样3.2 有限母体有放回抽样3.3 无限母体 四、比例抽样分布五、和差抽样分布 一、说明 上文中叙述母体和抽样的设计;以及抽样分布的概念,本篇将这种关系定量化,专门针对抽样的…

5V升8.4V2A同步升压恒压WT3213

5V升8.4V2A同步升压恒压WT3213 WT3213同步升压型直流/直流转换器以其微小的尺寸和卓越的能效而广受欢迎。这款设备在设计上的巧妙,包含电流模PWM控制环路、误差放大器、斜线补偿电路、比较器以及功率开关等关键元件,共同构成了它的特殊性能。 在细节上…

mysql-sql-练习题-1

文章目录 环境注释建表 5张建库学生表课程表教师表分数表总表 语法书写顺序in学过/没学过完全相同 环境 Windows cmd(普通用户/管理员) mysql -uroot -pmysql版本,模式(可自定义) select version(),global.sql_mode…

选对伪原创改写软件,文章写作不犯难!

文章写作在当下火热的自媒体的行业中是一项非常重要的技能,只要是参与做自媒体的朋友,想要在内容输出方面不出现困难的情况,那么文章写作的技能基本要具备,但是我们依然能看到有很多不擅长写作的朋友也做起了自媒体,并…

为什么选择福汇外汇?

福汇外汇凭借其品牌信誉、丰富的交易产品、先进的交易平台、高杠杆和低保证金要求、专业的客户服务、严格的监管以及便捷的出入金方式,成为了许多投资者选择的外汇交易平台。 为什么选择福汇外汇? 1、品牌信誉:福汇外汇是全球最大的零售外汇交…

深度学习-自动求导

目录 向量链式法则标量链式法则 拓展到向量例题1例题2 符号求导数值求导自动求导计算图自动求导的两种模式链式法则正向累积(从x出发)反向累积(反向传递--先计算最终的函数即y)反向累积总结 自动求导计算y关于x的梯度,…

Virtualbox7.0.10--创建虚拟机

前言 下载Virtualbox7.0.10,可参考《Virtualbox–下载指定版本》 Virtualbox7.0.10具体安装步骤,可参考《Virtualbox7.0.10的安装步骤》 Virtualbox7.0.10创建虚拟机,可参考《Virtualbox7.0.10–创建虚拟机》 Virtualbox7.0.10安装Ubuntu20.0…

校园安全升级:AR实景监测场景方案

在教育领域,随着校园的逐步对外开放,学校正面临着前所未有的管理挑战。社会人员的大量涌入不仅带来了文化的交流和知识的分享,也给校园安全带来了诸多隐患。新闻报道中不断出现的校园安全事件,如入室伤人、盗窃和非法传销等&#…

7.19 下午题典型考点

一、安全防护体系 (一)来由 安全保护等级(5个):用户自主、系统审计、安全标记、结构化、访问验证(自己全借问) 为了对信息系统从不同角度做安全保护; 有利于从不同角度去加强信息系…

提示词工程入门-使用文心一言4.0-通义千问-GPT4-Claude3通用提示技巧测试

提示词工程基础🚀 在了解完了大语模型的基本知识,例如API的使用多轮对话,流式输出,微调,知识向量库等知识之后,接下来需要进一步补足的一个大块就是提示词工程,学习和了解提示词工程除了基本的提…

【逆向百例】百度翻译js逆向

关注它,不迷路。 本文章中所有内容仅供学习交流,不可用于任何商业用途和非法用途,否则后果自负! 前言 目标 分析某度翻译接口,使用python获取翻译结果,并用pyinstaller打包成单文件可执行程序。 工具 ch…

云端飞翔,一触即达 —— 100G网卡,连接未来

关于100G网卡,这是一种高速网络接口控制器,主要用于数据中心和高性能计算环境,以支持更快的数据传输速率。100G网卡可以提供每秒100吉比特的传输速率,适用于需要处理大量数据和高速网络通信的场合。 在选择100G网卡时,…

排序算法(2)快排

交换排序 思想:所谓交换,就是根据序列中两个记录键值的比较结果来对换这两个记录在序列中的位置,交换排序的特点是:将键值较大的记录向序列的尾部移动,键值较小的记录向序列的前部移动。 一、冒泡排序 public static…

【C++】stack queue的介绍使用以及模拟实现

目录 01.容器适配器 02.栈(stack) 1.stack的介绍 2.stack的使用 3.stack的模拟实现 03.队列(queue) 1.queue的介绍: 2.queue的使用 3.queue的模拟实现 04.双端队列(deque) 1.介绍 2.…

LeetCode1017题:负二进制转换(原创)

【题目描述】 给你一个整数 n ,以二进制字符串的形式返回该整数的 负二进制(base -2)表示。注意,除非字符串就是 "0",否则返回的字符串中不能含有前导零。 示例 1: 输入:n 2 输出&…

深度学习-N维数组和访问元素

目录 N维数组访问元素 N维数组 N维数组是机器学习和神经网络的主要数据结构 访问元素 最后一个子区域中的::是跳的意思,这个区域说明的是从第一个元素(即第一行第一列那个)对行开始跳3下循环下去直到行结束、对列开始跳2下循环下去直到列…

springboot拦载器

1、拦载器 package com.Interceptor;import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONObject; import org.springframework.web.servlet.HandlerInterceptor; import org.springframework.web.servlet.ModelAndView;import javax.security.auth.login.Log…

如何快速申请SSL证书实现HTTPS访问?

申请SSL证书最简单的方法通常涉及以下几个步骤,尽量简化了操作流程和所需专业知识: 步骤一:选择适合的SSL证书类型 根据您的网站需求,选择最基础的域名验证型(DV SSL)证书,它通常只需验证域名所…

技术融合与创新大象机器人水星Mercury X1人形机器人案例研究!

引言 在科技迅速发展的当下,人形机器人正变得日益重要,其应用范围从工业自动化到服务业不断扩展。本文将通过Mercury X1大象人形机器人的案例,探讨如何利用尖端技术如大型语言模型(LLM)、同时定位与映射(SL…