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

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'

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

985、211之后,“101计划”来了

日前,教育部部署基础学科系列“101计划”推进工作在京展开。 在985、211之后,“101计划”以锐不可当的气势重新进入高等教育大众的视野。 图 |基础学科系列“101计划”工作推进会暨计算机“101计划”成果交流会在京召开 缘起 一直以来,我国办…

您用来登录计算机的密码与登录密钥环里的密码不再匹配

您用来登录计算机的密码与登录密钥环里的密码不再匹配 问题描述解决方法 问题描述 在使用ubuntu系统时,打开程序显示“您用来登录计算机的密码与登录密钥环里的密码不再匹配“ 解决方法 1.在终端中输入 seahorse ,打开密钥管理 2.删除程序登陆密钥 3.打…

elaticsearch windows安装

es下载地址 https://www.elastic.co/cn/downloads/elasticsearch https://www.elastic.co/cn/downloads/past-releases#elasticsearch 在这里插入图片描述 下载直接解压,解压后目录 双击bin目录下的elasticsearch.bat开启服务 注意:9300 端口为 Elas…

我们不可能永远都在救火 ——Scrum中技术债

一、定义 技术负债(英语:Technical debt),又译技术债,也称为设计负债(design debt)、代码负债(code debt),是编程及软件工程中的借鉴了财务债务的系统隐喻。指…

智慧图书管理|基于SSM+vue的网上服装商城系统(源码+数据库+文档)

智慧图书管理目录 基于SSMvue的网上服装商城系统 一、前言 二、系统设计 三、系统功能设计 1.1 服装列表 1.2 公告信息管理 1.3 公告类型管理 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取: 博主介绍&#xff1…

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…

Kingbase(人大金仓数据库)使用教程(下载、安装、JDBC连接、MyBatis-Plus应用)

Kingbase(人大金仓数据库)使用教程(下载、安装、JDBC连接、MyBatis-Plus应用) 下载JDBC的jar包 下载数据库安装文件 点击链接,下载授权文件(开发版365天),如果后续许可过期&#…

回归预测 | Matlab实现SSA-ESN基于麻雀搜索算法优化回声状态网络的多输入单输出回归预测

回归预测 | Matlab实现SSA-ESN基于麻雀搜索算法优化回声状态网络的多输入单输出回归预测 目录 回归预测 | Matlab实现SSA-ESN基于麻雀搜索算法优化回声状态网络的多输入单输出回归预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.Matlab实现SSA-ESN基于麻雀搜索算法…

阿斯达年代记三强争霸服务器没反应 安装中发生错误的解决方法

阿斯达年代记三强争霸服务器没反应 安装中发生错误的解决方法 最近刚上线的由影视剧改编的游戏《阿斯达年代记三强争霸》可谓是在游戏圈内引起了轩然大波,这是一款由网石集团与龙工作室联合开发的MMORPG游戏,游戏背景设定在一个名为阿斯大陆的区域&…

docker部署prometheus

概述 Prometheus是一个开源的服务监控系统和时序数据库,专为云计算环境设计。它提供了通用的数据模型和快捷的数据采集、存储和查询接口。Prometheus的核心组件Prometheus server会定期从静态配置的监控目标或者基于服务发现自动配置的目标中拉取数据。当新拉取到的…

Java设计模式 _创建型模式_工厂模式(普通工厂和抽象工厂)

一、工厂模式 属于Java设计模式创建者模式的一种。在创建对象时不会对客户端暴露创建逻辑,并且是通过使用一个共同的接口来指向新创建的对象。 二、代码示例 场景:花店有不同的花,通过工厂模式来获取花。 1、普通工厂模式 逻辑步骤&#…

maven-安装maven

解压 修改配置文件 apache-maven-3.6.1\conf\settings.xml 新建文件夹mvn_repo为仓库 配置镜像 <mirror> <id>alimaven</id> <name>aliyun maven</name> <url>http://maven.aliyun.com/nexus/content/groups/public/</url><…

手动在Ubuntu22.04上部署LAMP环境

简介 LAMP环境是常用的Web开发环境之一&#xff0c;其中LAMP分别代表Linux、Apache、MySQL和PHP。本文介绍如何在Ubuntu操作系统的ECS实例内部署LAMP环境。 准备工作 该实例必须满足以下条件&#xff1a; 实例已分配公网IP地址或绑定弹性公网IP&#xff08;EIP&#xff09;。…

电脑运行Omniverse卡顿?试试赞奇云工作站

无论是创造能够表达原始情感的逼真数字人&#xff0c;还是构建身临其境的虚拟世界&#xff0c;全球设计、工程、创意和其他行业的人士都在通过3D工作流&#xff0c;突破技术壁垒并拓展创意可能&#xff0c;让虚拟世界和现实世界交融与观众产生共鸣。在众多连接未来创作内容的平…

【Canvas与艺术】 绘制五星红旗

【注意】 该图中五星定位和大小都是按 https://www.douyin.com/note/7149362345016380710 精确绘制的。 【成图】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8&q…

Spring AOP详解,简单Demo

目录 一、Spring AOP 是什么&#xff1f; 二、学习AOP 有什么作用&#xff1f; 三、AOP 的组成 四、 Spring AOP 简单demo 一、Spring AOP 是什么&#xff1f; Spring AOP&#xff08;Aspect-Oriented Programming in Spring&#xff09;是Spring框架中的一个重要组件&…

python部署linux

项目做完了&#xff0c;就涉及到了部署 部署 Python的打包部署方式有多种&#xff0c;具体取决于项目的需求、规模以及所使用的工具。以下是几种常见的Python打包部署方式&#xff1a; 使用pip安装&#xff1a;对于小型的Python库或工具&#xff0c;通常可以直接通过pip进行安…

《恶意不息》是一款什么样的游戏,苹果电脑怎么玩《恶意不息》恶意不息游戏内怎么存档 mac电脑玩游戏

近日steam游戏商城新上架了一款名叫《恶意不息》的游戏十分火爆&#xff0c;那么《恶意不息》是一款什么样的游戏&#xff0c;苹果电脑怎么玩《恶意不息》&#xff1f;一起来看看吧&#xff01; 一、《恶意不息》是一款什么样的游戏&#xff1f; Private Division&#xff0c;…

云手机对出海企业有什么帮助?

近些年&#xff0c;越来越多的企业开始向海外拓展&#xff0c;意图发掘更广阔的市场。在这过程中&#xff0c;云手机作为一个新型工具为很多企业提供了助力&#xff0c;尤其在解决海外市场拓展过程中的诸多挑战方面发挥着作用。 首先&#xff0c;云手机的出现解决了企业在海外拓…

Python数组类+AI插件

目录 规划实现初始化插入删除查找 AI插件单测注释调优建议 小结 规划 先想清楚都写哪些&#xff0c;然后再动手操作 用Python写了一个简单数组类&#xff0c;首先思考下都写哪些功能&#xff1a; 插入删除查找用插件做单元测试和写注释 目的只是实现一个简单的数组类&#x…