【vue3】css原子化
一、制作原子化css
简单介绍
css原子化：Let’s Define Exactly What Atomic CSS is | CSS-Tricks - CSS-Tricks。
如果将编程语言（c/c++等）的基本思想应用于超文本语言（html/css等），能使后者的开发效率大大提高。
什么是css原子化？先让我们把目光转到编程语言的一个基础概念——函数。函数可以增加我们代码的复用性。举一个简单的例子，我们定义一个判断质数的函数isPrime()，一个判断非质数的函数isNotPrime()，再定以一个将数字加入数组的函数push()，这些足够小的函数，我们暂且称他们为原子函数。通过原子函数，我们可以轻松地构造一个将质数加入数组的“复杂”函数：只要调用isPrime和push即可；创建一个将非质数加入数组的函数亦是如此。
css原子化与之类似。我们编写一些足够小的类选择器，暂且称其为原子选择器，并将他们挂载到需要的dom上。
css原子化还有另一个核心概念，就是css类名语义化，这也是原子化的依据。我们可以编写一个名为display-inline类选择器，其属性则是display:inline，类似的，还可以定义display-flex类选择器，包含一个属性：display:flex。
当在css文件中完成一系列定义后，在html中书写页面的过程将变得十分流畅，效率也得到到极大的提高，我们像调用函数一样调用类选择器：由传统的先挂载选择器后书写一个属性丰富的选择器，转变为：当我们定义一个dom对象后，根据需要，给它挂载上不同的类选择器。
传统实现
借助scss预处理器（Sass世界上最成熟、稳定和强大的CSS扩展语言 | Sass中文网），我们可以快速地完成定义原子的任务：
// style.scss
@for $i from 1 through 10 {
.margin-#{$i} {
margin: $i / 4 rem;
}
}
编译结果为：
.margin-1 { margin: 0.25 rem; }
.margin-2 { margin: 0.5 rem; }
/* ... */
.margin-10 { margin: 2.5 rem; }
二、集成TailwindCSS
简单介绍
让人兴奋的是，css原子并不需要我们定义，市面上已经有为我们准备好的基于css原子化思想的css框架。而网页开发者的工作，就是将其引入到项目中，然后在html中根据需要引入框架提供的css选择器即可。正如Tailwind CSS框架首页所说：Rapidly build modern websites without ever leaving your HTML.
常见的这类框架有：Tailwind CSS、Windi CSS、Tachyons等。有些ui库也在其中运用了这种思想：比如Bootstrap、Chakra UI。
官方文档：Tailwind CSS
基于css原子化思想构建的项目集合：https://tailwindcss.com/showcase。
TailwindCss为开发者提供丰富的css类名，以快速实现样式控制，直接在dom上使用即可（和animate.css插件类似）。
创建项目
npm init vue@latest 或 vue create project-name
安装依赖
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
生成配置文件
npx tailwindcss init -p
修改配置文件
// tailwind.config.js
module.exports = {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
extend: {},
},
plugins: [],
}
全局引入css
/* tailwind.css，名字位置随意，只要在maints中正确引入即可 */
@tailwind base;
@tailwind components;
@tailwind utilities;
// main.js/main.ts
import ’./tailwind.css'
使用示例
代码：
<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
<div class="md:flex">
<div class="md:flex-shrink-0">
<img class="h-48 w-full object-cover md:w-48" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201702%2F09%2F20170209103108_VrThc.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671277226&t=160336a6adb676071a555f1915a9c86d" alt="Man looking at item at a store">
div>
<div class="p-8">
<div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case studydiv>
<a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Finding customers
for your new businessa>
<p class="mt-2 text-gray-500">Getting a new business off the ground is a lot of hard work. Here are five ideas
you can use to find your first customers.p>
div>
div>
div>
效果：
然而，TailwindCSS在提供充足的css原子的同时，也增大了项目的体积（生成了一个几MB的css文件，包括很多没有使用的原子）。为了解决这个问题，Tailwind采用生成再清除的方法：在生成构建时，TailwindCSS使用PurgeCSS（PurgeCSS - Remove unused CSS | PurgeCSS）去除没有被使用的css类，以减少生成的css文件的体积。
三、unocss通用框架
简单介绍
官方文档：unocss/unocss: The instant on-demand atomic CSS engine. (github.com)
开发者文章：重新构想原子化CSS - 知乎 (zhihu.com)。
UnoCSS，通过预设，可以模拟大多数已有原子化 CSS 框架的功能。例如，默认的 @unocss/preset-uno 预设（实验阶段）是一系列流行的原子化框架的通用超集，包括了 Tailwind CSS，Windi CSS，Bootstrap，Tachyons 等。
现在能用吗？
简而言之：可以，但有注意事项。
UnoCSS 仍处于实验阶段，但由于其精简的设计，生成的结果已经非常可靠了。需要注意的一点是，API 还没有最终定案，虽然我们会遵循 semver 的进行版本发布，但是还请为破坏性改动做好准备。
注意：它并非被设计成 Windi CSS 或 Tailwind 的替代品（考虑等待 Windi CSS v4）。我们不建议将现有项目完全迁移到 UnoCSS。你可以在新的项目中试用它，或者将它作为你现有 CSS 框架的补充（例如，禁用默认预设，只使用纯 CSS 图标的预设，或者自定义你的规则）。
个人认为：如果工具的设计和使用理念符合你的开发习惯，你可以尝试使用它。
创建项目
建议使用vite构建项目并集成unocss而不是使用vue-cli来构建项目。（vite基于rollup而vue-cli基于webpack，而unocss的webpack版本功能较少）
安装依赖
npm i -D unocss @unocss/preset-uno
配置插件
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Unocss from '@unocss/vite'
import { presetUno } from 'unocss'
export default defineConfig({
plugins: [
vue(),
Unocss({
presets: [
presetUno()
]
/* options */
}),]
})
全局引入css
// main.js/main.ts
import 'uno.css'
使用示例
unocss的一个重要概念就是“预设”（preset），你可以在官方文档中获取更多关于预设的信息，它能够为我们提供更多方便实用的功能。但如果你只是需要TailwindCSS的功能以及unocss的性能，你只需要完成“配置插件”中的内容，并在html中使用TailwindCSS官方文档提供的类名即可。
- 配置
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Unocss from '@unocss/vite'
import { presetUno,presetAttributify,presetIcons} from 'unocss'
// 这三个预设对应unocss的常见特色功能，分别是
// presetAttributify，属性语义化，直接在属性上写样式！()
// presetIcons,实现不需要JavaScript的纯css图标。
// presetUno就是缺省的配置项，如果你需要配置其他预设，就应该显式引用它。
// 如果你只是想使用TailwindCSS等框架的内容，不需要上面的功能，
// 你甚至不需要引入这些文件、不对vite的插件进行更多的配置，就可以直接在html中使用它。
export default defineConfig({
plugins: [
vue(),
Unocss({
// 自定义css：
// rules可以自定义原子css
// shortcuts可以给多个原子css组合取一个别名，方便使用
rules: [['custom-rule', { color: 'red' }]],
shortcuts: {
'custom-shortcut': 'text-lg text-orange hover:text-teal',
},
// 预设
presets: [
presetUno(),
presetAttributify(),
presetIcons({
scale: 1.2,
cdn: 'https://esm.sh/',
}),
],
}),
]
})
- 使用
<div h-full text-center flex select-none all:transition-400>
<div ma>
<div text-5xl fw100 animate-bounce-alt animate-count-infinite animate-duration-1s>
unocss
div>
<div op30 text-lg fw300 m1>
The instant on-demand Atomic CSS engine.
div>
<div m2 flex justify-center text-2xl op30 hover="op80">
<a
i-carbon-logo-github
text-inherit
href="https://github.com/unocss/unocss"
target="_blank"
>a>
div>
div>
div>
<div absolute bottom-5 right-0 left-0 text-center op30 fw300>
on-demand · instant · fully customizable
div>
-
查看效果：Unocss Playground演练场。
-
图标预设：
presetIcons，引用纯css图标（参考上面的示例）。你可以从Iconify项目（包含一百余个热门图标集合：Material Design Icons， Ant Design Icons 等等）获得属性的名字：属性格式：i-图标库-图标名。可以看到图标名称为carbon:logo-github，对应属性i-carbon-logo-gihub。npm i -D @iconify-json/ic
Icônes (icones.js.org)：这个网站可以更方便地查看Iconify项目中的图标集。
-
全部预设
Official Presets
Description
@unocss/preset-uno
The default preset (right now it’s equivalent to @unocss/preset-wind).
@unocss/preset-mini
The minimal but essential rules and variants.
@unocss/preset-wind
Tailwind / Windi CSS compact preset.
@unocss/preset-attributify
Provides Attributify Mode to other presets and rules.
@unocss/preset-icons
Use any icon as a class utility.
@unocss/preset-web-fonts
Web fonts at ease.
@unocss/preset-typography
The typography preset.
@unocss/preset-tagify
Tagify Mode for UnoCSS.
@unocss/preset-rem-to-px
Converts rem to px for utils.
Community Presets
Description
unocss-preset-scalpel
Scalpel Preset by @macheteHot.
unocss-preset-chroma
Gradient Preset by @chu121su12.
unocss-preset-scrollbar
Scrollbar Preset by @action-hong.
unocss-applet
Using UnoCSS in applet (UniApp / Taro) by @zguolee.
unocss-preset-weapp
Wechat MiniProgram Preset for UniApp and Taro by @MellowCo.
unocss-preset-heropatterns
Preset that integrates Hero Patterns by @Julien-R44.
unocss-preset-flowbite
Port of of Flowbite Tailwind plugin for UnoCSS by @Julien-R44.
unocss-preset-forms
Port of @tailwindcss/forms for UnoCSS by @Julien-R44.
unocss-preset-extra
Animate.css Preset and some other rules by @Zhang-Wei-666.
unocss-preset-daisy
daisyUI Preset by @kidonng.
unocss-preset-primitives
Like headlessui-tailwindcss , radix-ui , custom for UnoCSS By @zirbest.
unocss-preset-theme
Preset for automatic theme switching by @Dunqing
Community Frameworks
Description
Anu
DX focused utility based vue component library by @jd-solanki
-
使用daisyUI预设【css】使用daisyUI_46590928的博客-CSDN博客
-
使用Animate.css预设【css】使用Animate.css_46590928的博客-CSDN博客