更新记录

1.0.9（2024-04-13）

升级版本

1.0.8（2023-12-27）

更新提示

1.0.7（2023-12-19）

修改描述

平台兼容性

HBuilderX插件通用注意事项

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

atomcss的hbuilderX插件

为个人使用，谨慎下载

注意

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

当前插件为@meizhou/atomcss的hbuilderX代码提示插件，为个人使用，谨慎下载

hbuilderX插件功能

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

关于atomcss

为我自己打造的css原子化

谨慎下载

atomcss能带来什么？

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

uniapp全端支持

vue支持度

使用

@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预设规则文档地址

交流反馈

致敬

vue、DCloud、uni-app