Skip to content

novlan1/press-ui

Repository files navigation


node downloads NPM Unpacked Size NPM License GitHub last commit GitHub Created At

Press UI

易用、灵活、基于 uni-app 的跨端组件库

查看文档 | 查看示例

1. 介绍

Press UI是一套易用、灵活,基于uni-app的跨端组件库。

  • 🚀 70+ 基础组件,覆盖移动端主流场景
  • 🚀 支持基于uni-app的H5、微信小程序、QQ小程序、APP、支付宝小程序、抖音小程序等
  • 💪 支持普通H5项目
  • 💪 支持 Vue2 和 Vue3
  • 💪 零外部依赖,不依赖三方 npm 包
  • 📖 提供丰富的中英文文档和组件示例
  • 🍭 支持主题定制,内置 600+ 个主题变量
  • 🌍 支持国际化,内置 16+ 种语言包

2. 解决痛点

Press UI作为基础组件库,解决了以下痛点:

  1. 支持包含vant的H5项目平滑迁移至uni-app项目,仅需改下引用地址和组件名称
  2. 丰富的组件类型,以及易用的API,让uni-app开发变得简单
  3. 支持国际化、主题定制等,组件灵活性更强
  4. 支持普通Vue项目,达到一套代码n+1端复用

3. 应用场景

Press UI可应用于uni-app项目,或者普通的H5项目,同时支持 Vue2 和 Vue3。

目前已应用在王者赛宝、HoK Club、赛宝Pro、和平赛事、高能赛事、商户赛等项目中。



4. 如何使用

4.1. npm 方式

  1. 安装npm
npm i press-ui
  1. 在页面中正常引入并使用

比如 button 组件:

<template>
  <PressButton />
</template>
<script>
import PressButton from 'press-ui/press-button/press-button.vue'

export default {
  components: {
    PressButton, 
  },
}
</script>
  1. 配置

需要在vue.config.js中配置下 transpileDependencies

module.exports = {
  transpileDependencies: ['press-ui'],
}

4.2. uni_modules 方式

插件市场直接导入即可

5. 立即体验

下图是示例二维码,第一行分别为基于 uni-appVue2.x 版本的 H5、微信小程序、QQ小程序、支付宝小程序、安卓项目。

第二行分别为基于 uni-appVue3.x 版本的H5、微信小程序,及非 uni-app 环境的 Vue2.xVue3.x 版本的H5项目。

6. 示例项目

点击下方链接查看示例项目。

  1. Vue2
  2. Vue3
  3. Vue2 非 uni-app
  4. Vue3 非 uni-app

7. 加群交流

欢迎加入QQ群沟通。