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