Write the Code. Change the World.

5月 26

原子化 css 的好用是真的好用。
https://antfu.me/posts/reimagine-atomic-css-zh

https://juejin.cn/post/7028841960752283656

https://blog.csdn.net/qq_41499782/article/details/124074678

https://blog.csdn.net/sg_knight/article/details/124097860

https://windicss.org/

https://github.com/unocss/unocss

使用 unocss

https://github.com/unocss/unocss

class 可以参考参考
https://www.tailwindcss.cn/docs/align-items

这里用 pnpm 来安装。

  • 安装添加
pnpm add unocss -D
  • 添加到 vite.config.ts 中
import vue from '@vitejs/plugin-vue'
import Unocss from 'unocss/vite'
import { defineConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Unocss({})
  ]
})
  • main.ts 中引入
import 'uno.css'
  • 项目中使用
<div class="w-300px h-120px rounded-8px m-20px shadow-md">
</div>

仅仅用样式就可以实现宽300像素高120像素圆角8像素 margin 20 像素,带 md 程度的阴影的div盒子。这样多方便呀。

当你已经在使用了,可以通过 http://localhost:3000/__unocss 查看生成的 css 文件,是不是很人性化,文件量还小。

vue 面试题

https://vue3js.cn/interview/

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注