@jump-mp/uni-jump-ui NPM

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

//build 模式，发行打包
npm run build:mp-jump

或

cd 目录(/xxx/projectName)
yarn
//dev 模式
yarn dev:mp-jump

//build 模式，发行打包
yarn build:mp-jump

使用IDE打开dev模式生成的路径/dist/build/mp-jump目录或者build模式生成的路径/dist/dev/mp-jump，IDE会自动安装依赖以及真机调试。

使用 npm 安装

在 vue-cli 项目中可以使用 npm 安装 uni-jump-ui 库。

注意 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 体系中，推荐开发者首先使用性能更高的基础组件，然后按需引入必要的扩展组件。