aio-miniui
v1.0.0
Published
UI components library with MiniProgram
Downloads
7
Readme
使用
- 直接从 github 上 clone 下来
- 34基础组件 7业务组件
开发
- 安装依赖:
npm install- 执行命令:
npm run devsrc 中的源代码会被构建并生成到 examples/dist 目录下。所以,执行命令后,使用微信开发者工具打开examples文件,可以预览。
预览 examples目录是一个小程序项目目录,以此目录作为小程序项目目录在开发者工具中打开即可查看自定义组件被使用的效果。 新增组件,需要增加对于examples项目的的预览配置, 3.1 该项目的app.json增加组件对应的分包, subPackages下配置 3.2 pages/navigator/config/config/basic-navi.js中增加对应的组件配置 3.3 pages/components/basic/pages/新建对应的预览页面
热更新
npm run watchps:执行
npm run watch则会监听 src 目录下的变动并进行拷贝。
打包
执行 npm run build 生成的dist是组件库的上传目录。
- 进阶:
- 如果有额外的构建需求,可自行修改 build 目录中的构建脚本。
- 内置支持 less 语法. 若需要可以自行修改 build/task.js 配置文件中相关配置。
- 默认开启 eslint
发布私仓
- 开通私仓账户
- 切换npm的源为私仓发包的源(建议使用nrm管理npm私仓源)
- npm login登陆 输入账号和密码
- npm publish发布 (注意发布前,需要先执行npm run build打包)
具体项目中使用私仓
在项目中npm装包前,先切换npm源为私仓下载源 再执行 npm i
发布正常源
ps: 发布前得确保已经执行构建,小程序 npm 包只有构建出来的目录是真正被使用到的。
- 如果还没有 npm 帐号,可以到 npm 官网注册一个 npm 帐号。
- 在本地登录 npm 帐号,在本地执行:
npm adduser或者
npm login- 在已完成编写的 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中。
