Hbuilder创建的项目(uniApp + Vue3)中引入UnoCSS原子css引擎

这里是UnoCSS的官网介绍

UnoCS通过简化和优化CSS的编写过程来提高Web开发的效率和可维护性。好处是:

  • 提升开发效率
  • 提升开发效率
  • 提高一致性
  • 增强灵活性
  • 易于维护
  • 方便的集成与配置

同时还支持预设变量和规则。这些可参看官网进行配置。Unocss通过其原子化方法、高度的可定制性和强大的集成能力,为开发提供了一个高效、灵活且易于维护的CSS。

使用

1. 安装
javascript 复制代码
// 安装
// 目前时间点来说推荐0.58.9 因为还要集成uviewplus,高版本会出现报错不兼容

npm i [email protected] unocss-preset-weapp -D
2. 创建文件 uno.config.ts 和 unocss.config.ts 文件
javascript 复制代码
// uno.config.ts

import { defineConfig } from 'unocss'

export default defineConfig({
    // 这里可以配置其他变量和规则
})
javascript 复制代码
// unocss.config.ts

import presetWeapp from 'unocss-preset-weapp'

import { transformerClass, transformerAttributify } from 'unocss-preset-weapp/transformer';

export default ({
  presets: [
    presetWeapp()
  ],
  transformers: [
    transformerAttributify(),
    transformerClass()
  ],
  shortcuts: []

})
3. main.js/ts中引入
javascript 复制代码
// ....

import 'uno.css'

// ...
4. 使用

已经可以使用了。

相关推荐
dualven_in_csdn1 小时前
搞了两天的win7批处理脚本问题
java·linux·前端
程序员小刘2 小时前
Uniapp如何适配HarmonyOS5?条件编译指南以及常见的错误有哪些?
uni-app
你的人类朋友2 小时前
✍️【Node.js程序员】的数据库【索引优化】指南
前端·javascript·后端
小超爱编程3 小时前
纯前端做图片压缩
开发语言·前端·javascript
应巅3 小时前
echarts 数据大屏(无UI设计 极简洁版)
前端·ui·echarts
耶啵奶膘3 小时前
uniapp+vue2+h5图片下载保存,微信浏览器、非微信浏览器
uni-app·notepad++
Jimmy3 小时前
CSS 实现描边文字效果
前端·css·html
islandzzzz4 小时前
HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
Senar4 小时前
网页中如何判断用户是否处于闲置状态
前端·javascript
很甜的西瓜4 小时前
typescript软渲染实现类似canvas的2d矢量图形引擎
前端·javascript·typescript·图形渲染·canvas