jump小程序基于 uniapp uni-ui 组件库

使用参考见网址,此仓库fork自uni-ui，感谢uni-ui的贡献。

快速开始

使用 @jump-mp/cli

通过 @jump-mp/cli 创建的 uniapp 工程自带有 uni-jump-ui 库；使用 @jump-mp/cli 创建uniapp项目如下:

1. 全局安装 @jump-mp/cli

npm install -g @jump-mp/cli

2. 创建uniapp项目

jump create-uniapp projectName

3. 启动项目，打开文件夹所在目录，安装依赖完成后可直接执行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

4. 使用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 [email protected] -D   或   yarn add [email protected] -D

sass-loader 请使用低于 @11.0.0 的版本，[email protected] 不支持 [email protected]

安装 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() 的方式安装