首页 > 其他分享 >有来团队后台项目-解析8

有来团队后台项目-解析8

时间:2024-03-14 20:58:19浏览次数:32  
标签:flex center color items ts 后台 import 解析 有来

UnoCss

介绍

UnoCss

官网UnoCss

官网

安装

pnpm add -D unocss

引入

vite.config.ts

import UnoCSS from 'unocss/vite'
// plugins 中引入
UnoCSS({
  /* options */
}),

创建uno.config.ts

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

export default defineConfig({
  shortcuts: {
    "flex-center": "flex justify-center items-center",
    "flex-x-center": "flex justify-center",
    "flex-y-center": "flex items-center",
    "wh-full": "w-full h-full",
    "flex-x-between": "flex items-center justify-between",
    "flex-x-end": "flex items-center justify-end",
    "absolute-lt": "absolute left-0 top-0",
    "absolute-rt": "absolute right-0 top-0 ",
    "fixed-lt": "fixed left-0 top-0",
  },
  theme: {
    colors: {
      primary: "var(--el-color-primary)",
      primary_dark: "var(--el-color-primary-light-5)",
    },
  },
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons(),
    presetTypography(),
    presetWebFonts({
      fonts: {
        // ...
      },
    }),
  ],
  transformers: [transformerDirectives(), transformerVariantGroup()],
});

main.ts 中引入

// 引入uno.css
import "uno.css";

验证

<script setup lang="ts">
import { ref } from "vue";
import variables from "@/styles/variables.module.scss";
defineProps<{ msg: string }>();

const count = ref(0);
</script>

<template>
  <div>
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
    <hr />
    <el-icon size="16" color="red">
      <Edit />
    </el-icon>
    <hr />
    <svg-icon icon-class="refresh" spin />
    刷新
    <hr />
    <div class="test-css">测试是否引入了颜色</div>
    <hr />
    <div :style="{ 'background-color': variables['bgColor'] }">
      测试全局使用
    </div>
    <hr />
    <button class="bg-blue w-80 h-10 ml-10 m-1">button</button>
  </div>
</template>

<style scoped lang="scss">
.read-the-docs {
  color: #888;
}
.test-css {
  width: 100px;
  height: 100px;
  background-color: $bg-color;
}
</style>

测试结果

在这里插入图片描述

标签:flex,center,color,items,ts,后台,import,解析,有来
From: https://blog.csdn.net/naozheyun2998/article/details/136701768

相关文章

  • 淘口令解析源头api接口
    淘口令网提供淘口令解析功能,淘口令解密工具可一键将淘口令文本解析还原成URL链接,可把淘口令转换成网址链接,方便查看口令图片,口令标题,口令有效期等,不限制1.口令解析工具可一键将加密的淘口令代码解析还原成正常链接。2.主要给用户提供电脑端查看口令内容,和打开口令里面......
  • 深入了解与全面解析华为认证(HCIA/HCIP/HCIE)
    一、网络行业技术认证网络行业对于技术评定一般分为两种,一种是企业认证,一种是国家认证企业认证属于技术认证,在国内的互联网企业都会承认,用于评定一个人的技术等级或者企业招投标的资质。网络行业认证最好的有三种,又分别有三种不同等级及多种方向,分别为:华为、思科、H3C(华......
  • volatile 关键字解析
    参考文档:validate关键字解析摘要:在Java并发编程中,要想使并发程序能够正确地执行,必须要保证三条原则,即:原子性、可见性和有序性。只要有一条原则没有被保证,就有可能会导致程序运行不正确。volatile关键字被用来保证可见性,即保证共享变量的内存可见性以解决缓存一致性问题......
  • 2024-03 STEMA 考试C++ 中级真题解析
    2024-03-10STEMA考试C++中级真题解析一、选择题(50分)1、    (110010)2+(c3)16的结果是(B )。A.(240)10        B.(11110101)2        C.(366)8        D.(f6)16备注:此题目下标代表进制,因不支持md格式。  2、   表达式1000/3的结果是(......
  • OCS2 例程代码解析- Quadrotor
    一、ocs2_quadrotorSTATE_DIM=12;INPUT_DIM=4;state:位置、角度、位置导数、角速度、input:Fz,Mx.My,Mz1、QuadrotorInterface.h定义一个类QuadrotorInterface,作用:QuadrotorInterface(conststd::string&taskFile,conststd::string&libraryFolder);构造函数,接受......
  • HTML常用布局标签:提升网页颜值!不可不知的HTML布局技巧全解析!
    在HTML的世界里,一切都是由容器和内容构成的。容器,就如同一个个盒子,用来装载各种元素;而内容,则是这些盒子里的珍宝。理解了这一点,我们就迈出了探索HTML布局的第一步。在HTML中,布局标签主要用于控制页面的结构和样式。本文将介绍一些常用的布局标签及其使用方法,并通过代码示例进行演......
  • Java登陆第三十五天——VUE初始页面解析
    Vite创建的默认Vue3项目中package.json文件信息如下:{"name":"vmoudle1","private":true,"version":"0.0.0","type":"module","scripts":{"dev":"vite",......
  • Rust解析JSON,结构体序列化和反序列化
    Rust参考教程:HereJSON一种常用的由键值对组成的数据对象;本文将通过多个例子讲解在Rust中如何解析JSON内容,以及如何将结构体转换成JSON字符串。在Rust中解析JSON文本通常需要使用一个JSON库。Rust标准库中有一个名为serde的库,它提供了序列化和反序列化结构体和其他数据类型的......
  • SMK20-12255保护测控装置电源板:功能特性与广泛应用解析
    SMK20-12255保护测控装置电源板:功能特性与应用解析SMK20-12255保护测控装置电源板是一种专用于电力系统的高性能电源供应与监测控制设备。它以其稳定可靠的电源供应、精准实时的电力参数监测以及快速响应的保护机制,为电力系统的安全稳定运行提供了重要保障。一、功能特性高......
  • COMP931 题型解析
    1-任务11/9截止日期先决条件:逾期罚款:分数:提交:COMP9311分配1将PersonName数据类型添加到PostgreSQLDBMS实现上次更新时间:2月25日星期日下午9:26最新更改显示为红色。。。较旧的变化显示为棕色。目的本任务旨在让您了解在向PostgreSQL添加新的基本类型的DBMS实践中如何处理数据。......