npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

aio-miniui

v1.0.0

Published

UI components library with MiniProgram

Downloads

7

Readme

使用

  • 直接从 github 上 clone 下来
  • 34基础组件 7业务组件

开发

  1. 安装依赖:
npm install
  1. 执行命令:
npm run dev

src 中的源代码会被构建并生成到 examples/dist 目录下。所以,执行命令后,使用微信开发者工具打开examples文件,可以预览。

  1. 预览 examples目录是一个小程序项目目录,以此目录作为小程序项目目录在开发者工具中打开即可查看自定义组件被使用的效果。 新增组件,需要增加对于examples项目的的预览配置, 3.1 该项目的app.json增加组件对应的分包, subPackages下配置 3.2 pages/navigator/config/config/basic-navi.js中增加对应的组件配置 3.3 pages/components/basic/pages/新建对应的预览页面

  2. 热更新

npm run watch

ps:执行npm run watch则会监听 src 目录下的变动并进行拷贝。

打包

执行 npm run build 生成的dist是组件库的上传目录。

  1. 进阶:
  • 如果有额外的构建需求,可自行修改 build 目录中的构建脚本。
  • 内置支持 less 语法. 若需要可以自行修改 build/task.js 配置文件中相关配置。
  • 默认开启 eslint

发布私仓

  1. 开通私仓账户
  2. 切换npm的源为私仓发包的源(建议使用nrm管理npm私仓源)
  3. npm login登陆 输入账号和密码
  4. npm publish发布 (注意发布前,需要先执行npm run build打包)

具体项目中使用私仓

在项目中npm装包前,先切换npm源为私仓下载源 再执行 npm i

发布正常源

ps: 发布前得确保已经执行构建,小程序 npm 包只有构建出来的目录是真正被使用到的。

  1. 如果还没有 npm 帐号,可以到 npm 官网注册一个 npm 帐号。
  2. 在本地登录 npm 帐号,在本地执行:
npm adduser

或者

npm login
  1. 在已完成编写的 npm 包根目录下执行:
npm publish

到此,npm 包就成功发布到 npm 平台了。

PS:一些开发者在开发过程中可能修改过 npm 的源,所以当进行登录或发布时需要注意要将源切回 npm 的源。

目录结构

以下为推荐使用的目录结构,如果有必要开发者也可以自行做一些调整:

|--build // 打包组件的配置目录
|--config // 公共样式目录
|--dist // 打包组件的构建目录
|--examples // 开发预览的项目目录
|   |--components // 预览项目的辅助组件
|   |--dist // 开发dev和watch构建的组件目录
|   |--images // 预览项目的辅助图片
|   |--pages // 预览项目的页面目录
|   |--utils // 预览项目的辅助公共方法
|   |--app.xxx // 预览项目的app配置
|   |--project.config.json // 预览项目的项目配置
|--src // 组件开发目录
|   |--behaviors // 组件共用的behaviors
|   |--common/core/utils // 组件公共方法
|   |--images // 组件共用的图片

PS:对外暴露的 js 模块/自定义组件请放在 src 目录下,不宜放置在过深的目录。建议对外暴露的公共js模块放置在src/utils中。