更新记录

1.0.9(2024-04-13) 下载此版本

升级版本

1.0.8(2023-12-27) 下载此版本

更新提示

1.0.7(2023-12-19) 下载此版本

修改描述

查看更多

平台兼容性

HBuilderX最低兼容版本
不确定

HBuilderX插件通用注意事项

HBuilderX-2.7.12以下版本安装插件市场内的插件后,卸载时需手动卸载,详细教程参考:如何手动卸载插件


[atomcss](https://meizhouchen.github.io/atom-css-doc/)的hbuilderX插件

为个人使用,谨慎下载

注意

需要在项目中安装了`@meizhou/atomcss`才能触发当前插件,否则当前插件不会生效

当前插件为@meizhou/atomcss的hbuilderX代码提示插件

hbuilderX插件功能

  • ✅ css代码提示
  • ✅ 悬浮class,查看对应的css样式
  • ✅ 根据主题,切换提示样式的颜色
  • ❌ 直接写style,生成对应class

关于atomcss

为我自己打造的css原子化

谨慎下载

atomcss能带来什么?

  • 更爽的开发体验
  • 更小的项目体积
  • 更少的样式编写
  • 更高的一致性和复用性
  • 更容易的代码移植
  • 更方便的样式修改
  • 更简单的样式配置
  • 远离痛苦的css命名
  • 痛苦的规则学习
  • 摇树优化的icon图标

uniapp全端支持

支持 atomcss
vue2,vue3
web,h5
nvue
uvue,uniappx,uts
小程序(微信、QQ、抖音...)
鸿蒙

vue支持度

支持 atomcss
vue2 + webpack
vue3 + vite

使用

@meizhou/atomcss文档地址

第一步、在uniapp、vue项目中,安装@meizhou/atomcss

npm i -D @meizhou/atomcss

第二步、修改项目的 vue 配置文件

// vue.config.js
const { atomcss } = require('@meizhou/atomcss')

module.exports = {
  configureWebpack: {
    plugins: [
      atomcss()
    ]
  }
}

第三步、增加 atomcss 配置文件

// atomcss.config.js
import { defineConfig } from '@meizhou/atomcss'
import { preset } from "@meizhou/atomcss/preset";

export default defineConfig({
    prefix: 'a-',
    presets: [preset()], //预设
})

第四步、在项目中使用

<template>
  <view class="a-p-32 a-m-32 a-c-#2 my-class">
    <view class="a-w-100%">页面内容</view>
  </view>
</template>

@meizhou/atomcss会自动把页面的class样式a-p-32 a-m-32 a-c-#2 a-w-100%编译为:

.a-p-32 { pading: 32px; }
.a-m-32 { magin: 32px; }
.a-c-_2 { color: #222222; }
.a-icon-80 { width: 80px; height: 80px;}
.a-w-100_ { width: 100%; }

my-class不会被编译,只有符合import { preset } from "@meizhou/atomcss/preset"定义的预设规则的class才会被编译

icon图标

  • 易拓展 配置中增加icons配置,指定ttf字体位置,对应图标的前缀即可

    icons: [
    // 任意拓展ttf字体,
    {
      prefix: 'uni-',
      path: './static/fonts/uniicons.ttf'
    },
    {
      prefix: 'i-',
      path: './static/fonts/my.ttf'
    }
    ],
  • 易使用 支持全端直接使用图标

    i-donghuabishun为图标名称,
    <text class="i-donghuabishun"></text>
fs-50修改图标大小,c-red修改图标颜色,
<text class="uni-left fs-50 c-red "></text>
  • 体积小,摇树优化 加入配置了2000千个图标,使用到的只有20个,最总只会打包这20个图标,图标体积从2000个减小为20个,大大减小了项目的体积

reset预设规则

详细reset预设规则文档地址

交流反馈

致敬

vueDClouduni-app

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问