@limm/windi-css-uni v0.1.0

windi-css-uni

1️⃣ 简介

Github：https://github.com/SunSeekerX/uni-app-starter/tree/main/packages/windi-css-uni

这是一些 css 的简写类名的库，用于快速开发 uni-app。适用于 vue+nvue 文件。类名的设计参考了 windicss 的类名。

大部分效果可以参考 https://cn.windicss.org/guide/ 预览。

在写代码的过程中，写 css 是非常头疼的事情，例如：

1. 命名；这应该是所有程序员的痛。
2. 写 dom 不能直接写 css；html 和 css 通常不在一块，需要滑动很长才能找到 css 定义的地方。
3. 很多重复定义；像 diaplay: flex; 这样的代码在 css 中写了太多太多

缺点也很明显

1. 增加了一些项目根本没有用到的 css 类
2. 可读性不好
3. 有一定的学习成本和记忆成本

有舍有得，自行取舍。

2️⃣ 快速上手

安装

npm

npm i @limm/windi-css-uni
# or
yarn add @limm/windi-css-uni

插件市场

插件市场地址：https://ext.dcloud.net.cn/plugin?name=windi-css-uniapp

导入

推荐全部引入，开启 treeshaking 会自动裁剪没有用到的类，截至目前，css 裁剪没有方案。

${app}/App.vue style 标签最上方导入

// npm 下载
@import '@limm/windi-css-uni';

// npm 下载 - 如果使用了 stylelint
@import '@limm/windi-css-uni/src/index.scss';

// 如果是插件市场导入的
@import '@/uni_modules/windi-css-uniapp/index.scss';

关于大小

全部压缩之后大概 258KB 左右大小。nvue 下应该不到 200KB。

使用

在下面列出的类名前增加 wd- 这是全局的前缀，为了防止和其他库或者你自己定义的样式冲突。

<view class="wd-flex-row wd-justify-between wd-items-center wd-leading-34">
  <text class="wd-text-fff wd-text-16 wd-font-bold">{{ item.name }}</text>
</view>

4️⃣ class

通用

排版

背景

边框

特效

布局

Display

Flexbox

Posiioning

尺寸

间隔

5️⃣ 问题？

1. 为什么没有 max-width 、min-width、max-height、min-height 等类？

   付出 > 收益，性价比不高，项目中用到的地方不多。增加之后文件增大了 100 多 kb。没有必要。

6️⃣ 更新日志（CHANGELOG）

0.1.0

• 文档修正

0.0.8

• 文档增加插件市场下载方式安装使用，支持 uni_modules

0.0.7

• 移除 nvue 下的断字相关的类，避免警告
  • break-normal
  • break-words
  • break-all

0.0.6

• 文档颜色描述修正

0.0.5

• 修正文本溢出行数无效

0.0.4

• 增加文本溢出功能类
• 增加 nvue 下 lines-{1~8} 功能类

0.0.3

• 文档颜色描述修正
• 增加边框颜色 border-black
• 增加边框颜色 border-{000~999}

0.0.2

• 增加背景色 bg-{000~999}
• 增加背景色 bg-black
• 增加文字颜色 text-fff、text-white
• 增加文字颜色 text-black

0.0.1

• 第一个可用版本