jump小程序基于 uniapp uni-ui 组件库
使用参考见网址,此仓库fork自uni-ui，感谢uni-ui的贡献。
快速开始
使用 @jump-mp/cli
通过 @jump-mp/cli 创建的 uniapp 工程自带有 uni-jump-ui 库；使用 @jump-mp/cli 创建uniapp项目如下:
- 全局安装
@jump-mp/cli
npm install -g @jump-mp/cli- 创建uniapp项目
jump create-uniapp projectName- 启动项目，打开文件夹所在目录，安装依赖完成后可直接执行uniapp转换jump命令进行构建
cd 目录(/xxx/projectName)
npm install
//dev 模式
npm run dev:mp-jump
cd /dist/dev/mp-jump
npm run build
//build 模式，发行打包
npm run build:mp-jump
cd /dist/build/mp-jump
npm run build或
cd 目录(/xxx/projectName)
yarn
//dev 模式
yarn dev:mp-jump
cd /dist/dev/mp-jump
yarn build
//build 模式，发行打包
yarn build:mp-jump
cd /dist/build/mp-jump
yarn build使用 npm 安装
在 vue-cli 项目中可以使用 npm 安装 uni-jump-ui 库，或者直接在 HBuilderX 项目中使用 npm 。（不推荐后一种方式）
注意 cli 项目默认是不编译
node_modules下的组件的，导致条件编译等功能失效 ，导致组件异常 需要在根目录创建vue.config.js文件 ，增加@jump-mp/uni-jump-ui包的编译即可正常// vue.config.js module.exports = { transpileDependencies: ['@jump-mp/uni-jump-ui'], }
准备 sass
vue-cli 项目请先安装 sass 及 sass-loader。
- 安装 sass
npm i sass -D 或 yarn add sass -D
- 安装 sass-loader
npm i sass-loader@10.1.1 -D 或 yarn add sass-loader@10.1.1 -D
sass-loader 请使用低于 @11.0.0 的版本，sass-loader@11.0.0 不支持 vue@2.6.12
安装 uni-jump-ui
npm i @jump-mp/uni-jump-ui 或 yarn add @jump-mp/uni-jump-ui
在 script 中引用组件：
import { uniBadge } from '@jump-mp/uni-jump-ui'
//import uniBadge from '@jump-mp/uni-jump-ui/lib/uni-badge/uni-badge.vue' //也可使用此方式引入组件
export default {
components: { uniBadge },
}在 template 中使用组件：
<uni-badge text="1"></uni-badge>
<uni-badge text="2" type="success" @click="bindClick"></uni-badge>
<uni-badge text="3" type="primary" :inverted="true"></uni-badge>注意
CLI引用方式，H5端不支持在main.js中全局注册组件，如有需求请使用（easyCom） 的方式引用组件- 使用 npm 安装的组件，默认情况下 babel-loader 会忽略所有 node_modules 中的文件 ，导致条件编译失效，需要通过配置
vue.config.js解决：// 在根目录创建 vue.config.js 文件，并配置如下 module.exports = { transpileDependencies: ['@jump-mp/uni-jump-ui'], }
使用 npm + easycom
使用 npm 安装好 uni-jump-ui 之后，需要配置 easycom 规则，让 npm 安装的组件支持 easycom
打开项目根目录下的 pages.json 并添加 easycom 节点：
// pages.json
{
"easycom": {
"autoscan": true,
"custom": {
// uni-jump-ui 规则如下配置
"^uni-(.*)": "@jump-mp/uni-jump-ui/lib/uni-$1/uni-$1.vue"
}
},
// 其他内容
pages:[
// ...
]
}uni-jump-ui 已支持的组件列表
| 组件名 | 组件说明 |
|---|---|
| uni-badge | 数字角标 |
| uni-calendar | 日历 |
| uni-card | 卡片 |
| uni-collapse | 折叠面板 |
| uni-combox | 组合框 |
| uni-countdown | 倒计时 |
| uni-data-checkbox | 数据选择器 |
| uni-data-picker | 数据驱动的picker选择器 |
| uni-dateformat | 日期格式化 |
| uni-datetime-picker | 日期选择器 |
| uni-drawer | 抽屉 |
| uni-easyinput | 增强输入框 |
| uni-fab | 悬浮按钮 |
| uni-fav | 收藏按钮 |
| uni-file-picker | 文件选择上传 |
| uni-forms | 表单 |
| uni-goods-nav | 商品导航 |
| uni-grid | 宫格 |
| uni-group | 分组 |
| uni-icons | 图标 |
| uni-indexed-list | 索引列表 |
| uni-link | 超链接 |
| uni-list | 列表 |
| uni-load-more | 加载更多 |
| uni-nav-bar | 自定义导航栏 |
| uni-notice-bar | 通告栏 |
| uni-number-box | 数字输入框 |
| uni-pagination | 分页器 |
| uni-popup | 弹出层 |
| uni-rate | 评分 |
| uni-row | 布局-行 |
| uni-scss | 辅助样式 |
| uni-search-bar | 搜索栏 |
| uni-section | undefined |
| uni-segmented-control | 分段器 |
| uni-steps | 步骤条 |
| uni-swipe-action | 滑动操作 |
| uni-swiper-dot | 轮播图指示点 |
| uni-table | 表格 |
| uni-tag | 标签 |
| uni-title | 章节标题 |
| uni-transition | 过渡动画 |
其他
- uni-jump-ui 是全端兼容的基于 flex 布局的、无 dom 的 ui 库
- uni-jump-ui 是 uni-app 内置组件的扩展。注意与 web 开发不同，uni-jump-ui 不包括基础组件，它是基础组件的补充。web 开发中有的开发者习惯用一个 ui 库完成所有开发，但在 uni-app 体系中，推荐开发者首先使用性能更高的基础组件，然后按需引入必要的扩展组件。
注意
uni-jump-ui不支持使用Vue.use()的方式安装
贡献代码
在使用 uni-jump-ui 中，如遇到无法解决的问题，请提 Issues 给我们，假如您有更好的点子或更好的实现方式，也欢迎给我们提交 PR