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. 使用

已经可以使用了。

相关推荐
crary,记忆2 小时前
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
前端·webpack·angular·angular.js
漂流瓶jz2 小时前
让数据"流动"起来!Node.js实现流式渲染/流式传输与背后的HTTP原理
前端·javascript·node.js
SamHou03 小时前
手把手 CSS 盒子模型——从零开始的奶奶级 Web 开发教程2
前端·css·web
我不吃饼干3 小时前
从 Vue3 源码中了解你所不知道的 never
前端·typescript
开航母的李大3 小时前
【中间件】Web服务、消息队列、缓存与微服务治理:Nginx、Kafka、Redis、Nacos 详解
前端·redis·nginx·缓存·微服务·kafka
Bruk.Liu3 小时前
《Minio 分片上传实现(基于Spring Boot)》
前端·spring boot·minio
鱼樱前端3 小时前
Vue3+d3-cloud+d3-scale+d3-scale-chromatic实现词云组件
前端·javascript·vue.js
zhangxingchao4 小时前
Flutter入门:Flutter开发必备Dart基础
前端
佚名猫4 小时前
vue3+vite+pnpm项目 使用monaco-editor常见问题
前端·vue3·vite·monacoeditor
满分观测网友z4 小时前
vue的<router-link>的to里面的query和params的区别
前端·javascript·vue.js