简介：vue3让你写页面样式事半功倍的CSS框架-Unocss认识

前端常见的css框架

windicss：https://cn.windicss.org/
tailwindcss：https://tailwindcss.com/
tachyons：https://tachyons.io/
unocss：https://gitee.com/mirrors/unocss

编写样式变得异常简单

原生写法，需要先在标签上定义class或id，然后在css样式表写样式

 .xd{margin: 1pxwidth: 1pxheight: 1px}

使用unocss框架，不需要定义class或id，直接在标签里写样式

<div m-1px w-1px h-1px> </div>

Unocss简介

作者：vue、vite核心开发成员 Anthony Fu
https://zhuanlan.zhihu.com/p/425814828?utm_medium=social&utm_oi=31225867665408
定义：Unocss 是一个引擎，而非一款框架，因为它并未提供核心工具类，所有功能可以通过预设和内联配置提供
优点
- 直观定制简单
- 无值的属性化模式
- 更好的兼容其他的组件库样式
- 带来灵活性的同时兼顾了性能

vue3让你写页面样式事半功倍的CSS框架-Unocss认识相关推荐

reset.css页面样式初始化
这个是所有HTML页面样式初始化,一般输入的样式-这里直接写出来,以后写样式前,一定引入这个文件 reset.css @charset "utf-8"; *{margin:0;pa ...
在 HTML 中引入 vue.js 写页面
突然说要写两个页面(只有两个页面,不是一个完整的项目..),有点懵,不知道从哪下手,而且只对 vue 熟悉那么一丢丢,其他框架不是很熟悉.但是没办法鸭,只能硬着头皮去做了!在这里做一下笔记. 一.前期 ...
github打开前端样式丢失_微信小程序入门教程之二：页面样式
这个系列的上一篇教程,教大家写了一个最简单的 Hello world 微信小程序. 但是,那只是一个裸页面,并不好看.今天接着往下讲,如何为这个页面添加样式,使它看上去更美观,教大家写出实际可以使用的 ...
通过Js来设置页面样式
介绍我们可以在编辑HTML源码的时候将CSS样式写死到.css文件或者HTML元素的style属性中,但又时候可能会需要动态地来修改某个元素的样式. 我这里介绍两种方式:修改HTML元素的style ...
微信小程序开发之——比较数字大小-页面样式(2.3)
一概述 WXSS(WeiXin Style Sheets)是一套样式语言,用于描述WXML的组件样式.WXSS具有CSS大部分特性,并在CSS基础上做了一些扩充和修改. 二选择器 2.1 概述 W ...
【饭谈】【测试圈相亲平台开发流程】：页面样式开发心得【工匠、智者、航海家】
如图,在我的vue前后端分离项目[测试圈相亲平台]的开发中,成功使用了第三方的页面样式级组件. 这使得很多粉丝朋友倍感新奇,纷纷效仿.于是就有人感叹到,辛苦学习前端样式的意义在哪? 哪怕是一个新手,只 ...
Vue3.0由单页面应用改为多页面开发
Vue3.0由单页面应用改为多页面开发一.使用vue cli创建一个单页面应用程序 1.在命令行窗口敲如下图命令,输入完成敲回车会自动打开一个vue的管理界面 2.在管理界面中创建项目选择好配置开 ...
image 微信小程序flex_微信小程序入门教程之二：页面样式
这个系列的上一篇教程,教大家写了一个最简单的 Hello world 微信小程序. 但是,那只是一个裸页面,并不好看.今天接着往下讲,如何为这个页面添加样式,使它看上去更美观,教大家写出实际可以使用的 ...
网站优化tag的正确用途,利用tag页面将事半功倍
网站优化tag的正确用途,利用tag页面将事半功倍网站tag栏目的描述调用文章描述的方法,最近着手新站www.uimou.com的优化,以为一直被我忽略的tag页面也在此次重新提上日程.本次在分享t ...

vue3让你写页面样式事半功倍的CSS框架-Unocss认识

简介：vue3让你写页面样式事半功倍的CSS框架-Unocss认识

前端常见的css框架

编写样式变得异常简单

Unocss简介

vue3让你写页面样式事半功倍的CSS框架-Unocss认识相关推荐

最新文章

热门文章