前言:本文所用主要库仅为vite, vue, unocss,所写代码均参考UnoCSS中文文档 编写,运行无误。
2023-11-16更新:新加入插件推荐,添加更多常规使用举例、参考文档
1.搭建环境
首先,请确保您的node版本≥16
看官方文档的时候,我有注意到UnoCSS对vite做了集成,本着我对vite的良好印象,我就选vite做服务吧:D
UnoCSS中文Vite集成文档
(2023-11-16更新:UnoCss官方文档…有点一言难尽,我更推荐阅读和查询Tailwind Css,根本思想是相同的)
第一步,使用 npm create vite 在某空文件夹创建项目,我选用了Vue+JS,JS可以换成TS也行,没有影响。
第二步,cd xxx(新建项目) 并 npm i
第三步,在项目文件夹下npm install -D unocss
(包安装完毕,下面就是引入和配置环节)
2.修改配置
2-1.修改vite.config.js
加入 import UnoCSS from ‘unocss/vite’
以及修改 plugins: [vue(), UnoCSS()],
2-2.创建uno.config.ts并写入下面代码
rules和presetIcons分别涉及匹配规则和图标表情引入,后面会说
// uno.config.ts
import {
defineConfig,
presetAttributify,
presetIcons,
presetTypography,
presetUno,
presetWebFonts,
transformerDirectives,
transformerVariantGroup
} from 'unocss'
export default defineConfig({
rules: [
// ['rotate-0.3', {transform: 'rotate(0.3turn)'}],
[/^rotate-0.([\.\d]+)$/, ([_, num]) => ({ transform: `rotate(0.${num}turn)` })],
],
shortcuts: [
// ...
],
theme: {
colors: {
// ...
}
},
presets: [
presetUno(),
presetAttributify(),
/*presetIcons({
collections: {
carbon: () => import('@iconify-json/twe')
}
}),*/
presetTypography(),
presetWebFonts({
fonts: {
// ...
}
})
],
transformers: [transformerDirectives(), transformerVariantGroup()]
})
2-3.在src/main.js(或main.ts)中加入
import 'virtual:uno.css'
3.代码实践
到这里可以 npm run dev并 打开浏览器啦
3-1.常规使用
由于UnoCSS是即时且按需渲染加载css的,意味着我们不需要花费大量心血去写样式,直接代码中写 class="xx-yy"即可,届时会在网页打开前生成对应的css代码,xx指代属性,yy指代数值,例如在App.vue template 首个div下中加入
<h1 class="mb-300px rotate-0.3">hahahahahha</h1>
<h1 class="mb-300px rotate-0.5">hahahahahha</h1>
其中 mb-300px是官方提供的预设规则,意为margin-bottom: 300px;而rotate-0.5是我写的自定义规则,在uno.config.ts中rules选项有写。
又因为UnoCSS是原子化的,理论上想完成一个复杂样式是得class=‘1 2 3 4 5 6…’
3-1-1 更多的常规使用举例
flex
flex flex-col justify-start items-center
after before
before:inline-block before:w-22px before:h-22px
after:bg-[url(@images/close.svg)]
媒体查询
md:hidden lt-md:mt-40px
@media (min-width: 768px) {
.md\:hidden {
display: none;
}
}
@media (max-width: 767.9px) {
.lt-md\:mt-40px {
margin-top: 40px;
}
}
详情请看 TailwindCss
字体相关
font-400 text-16px leading-16px color-#333(text-#333)
对应 font-weight: 400; font-size: 24px; line-height: 16px; color: #33
字体相关
font-400 text-16px leading-16px color-#333(text-#333)
对应 font-weight: 400; font-size: 24px; line-height: 16px; color: #33
shadow & background
shadow-[0_20px_20px_rgba(0,59,180,0.2)]
bg-gradient-to-r from-[#06DACC] to-#145CF0
bg-[url(@images/main-bg.jpg)]
bg-[rgba(34,42,65,.9)] bg-center bg-cover bg-no-repeat
3-2.使用图标icon或者表情包emoji
我用的是推特emoji,在项目文件夹终端输入npm i -D @unocss/preset-icons @iconify-json/twemoji
然后取消注释uno.config.ts下presetIcons内容
presetIcons({
collections: {
carbon: () => import('@iconify-json/twe')
}
}),
之后再在App.vue中加入
<div style="font-size: 40px;">
<div class="i-twemoji-grinning-face-with-smiling-eyes hover:i-twemoji-face-with-tears-of-joy"></div>
</div>
此时网页上会出现个表情,移动上去会变脸。
4.插件推荐&&个人使用体验
插件推荐-VS Code
非常好用,使用效果如下图,hover类名出现详细解释。
个人使用体验
从个人开发上,切实降低了开发心智负担,简单样式不用一遍遍重复写,复杂的样式共用部分可以自定义;也不用手写style,来回切类看是什么问题;为了一点简单样式给某些类取名等等等等。
同时可以用 | 切割类,区分不同屏幕,方便做响应式。