zz-mini-ui v0.1.1

zz-mini-ui

文档地址：https://xmheackers.gitee.io/zhizu-mini-ui-docs/

基于微信原生小程序的组件库

-- build <!-- 构建工具 -->
   -- bin <!-- 构建文件集合 -->
      -- compiler.js <!-- 打包编译小程序代码脚本 -->
      -- dev.mjs <!-- 启动本地环境脚本 -->
      -- i18n.js <!-- 国际化 -->
      -- new.mjs <!-- 创建新组件脚本 -->
   -- template <!-- 创建组件的模板目录 -->
      -- packages <!-- ./packages 组件模板 -->
      -- pages <!-- ./template/pages 组件模板 -->
   -- utils <!-- 工具类 -->
   -- release.sh <!-- 自动构建，自动发布脚本 -->
-- cli <!-- @vant/cli -->
-- example <!-- 小程序代码示例 -->
   -- common <!-- 公共静态文件 -->
   -- components <!-- 公共组件 -->
   -- dist <!-- 执行pnpm dev 后打包的dist，主要通过这个实时预览 -->
   -- i18n <!-- 国际化 -->
   -- pages <!-- 示例demo -->
   -- utils
   -- .eslnitrc.js
   -- app.js
   -- app.json <!-- 小程序路由，全局配置 -->
   -- app.wxss
   -- nav.config.js <!-- 页面配置路由 -->
   -- pageage.json
   -- pnpm-lock.yaml
   -- project.config.json
   -- route.config.js <!-- 路由构建 -->
   -- sitemap.json
-- packages <!-- 组件包 -->
   -- common <!-- 公共文件集合 -->
   -- wxs <!-- 公共wxs配置文件 -->
   -- ... <!-- 其它组件 -->
-- pnpm-weorkspace.yaml <!-- pnpm workspace包配置 -->
-- zhizu.config.mjs <!-- 全局配置文件 -->

Scripts

# 下载依赖包
pnpm i

# 本地启动环境
pnpm dev

# 创建新组件
pnpm new

# 打包编译组件包
pnpm build

# 发布包
pnpm run pub

# 部署网站
pnpm deploy:site

# 测试
pnpm test

# 测试通过率cover
pnpm codecov

开发新组件

1. 执行pnpm i, 下载node_modules，包括cli的node_modules (若安装过，此步忽略)
2. 执行pnpm dev, 启动本地环境
3. 执行pnpm new, 根据提示，输入组件中英文名称，一路回车
4. 在 根目录 ./packages/新组件名称 下开发新组件UI与逻辑
5. 通过小程序开发者工具打开根目录的example, 实时预览开发的组件

编译打包至npm

1. 执行pnpm build, 编译出小程序组件
2. 执行 npm publish 发布至指定npm包地址

项目中使用

1. 执行npm i zz-mini-ui, 下载至本地项目中，若项目根目录不存在package.json, 需先执行npm init创建package.json
2. 通过小程序工具栏， 工具 -> 构建npm, 自动构建出miniprogram_npm
3. 在项目中直接引用组件，示例：

// index.json
{
  "usingComponents": {
    "zm-nav-bar": "zz-mini-ui/nav-bar/index"
  }
}

小程序示例

用微信开发者工具打开example目录

- 基于pnpm, vite, vue3构建整体框架
- 基于vant-cli搭建文档网站
- 基于jest测试
- 利用gulp打包压缩小程序原生代码，并实时生成示例代码，通过小程序开发者工具实时预览
- 自动部署，自动发布