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

本文主要是介绍Hbuilder创建的项目(uniApp + Vue3)中引入UnoCSS原子css引擎，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

这里是UnoCSS的官网介绍

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

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

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

使用

1. 安装

// 安装
// 目前时间点来说推荐0.58.9 因为还要集成uviewplus,高版本会出现报错不兼容npm i unocss@0.58.9 unocss-preset-weapp -D

2. 创建文件 uno.config.ts 和 unocss.config.ts 文件

// uno.config.tsimport { defineConfig } from 'unocss'export default defineConfig({// 这里可以配置其他变量和规则
})

// unocss.config.tsimport 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中引入

// ....import 'uno.css'// ...

4. 使用

已经可以使用了。

这篇关于Hbuilder创建的项目(uniApp + Vue3)中引入UnoCSS原子css引擎的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---