查看文档 | 查看示例

1. 介绍

Press Plus 是从 Press UI 中剥离的业务组件部分，为什么要分离呢，有下面几点考虑。

1. 基础组件是有限的，业务组件是无限的
2. 基础组件已十分稳定，业务组件频繁改动，并且越来越多，存在影响基础组件的风险
3. 持续维护包含大量组件，且高质量的组件库比较累，分离后，Press UI 继续追求 100 分，Press Plus 追求 95 分
4. 从用户角度看，使用者如果只用基础组件，完全没必要下载业务组件，而且后续业务组件越来越多，包体积也会越来越大

1.1. 标准

Press Plus 相比 Press UI，会在以下几个方面降低标准：

1. 根据业务自身需要，进行 Vue3 的适配
2. 根据业务自身需要，进行非 uni-app 环境的适配
3. 根据业务自身需要，进行国际化支持

上述几点在 Press UI 中是全量支持的。

Press Plus 和 Press UI 都必须遵守的规范包括：

1. 严格的代码规范
2. BEM 规范，且类名需以 press 开头
3. 详尽的文档、丰富的示例

1.2. 过渡

业务组件过渡注意事项：

• 业务侧需尽快将业务组件的引入路径，改为 Press Plus
• Press UI 在下个大版本前，都不会删除现有的业务组件，确保业务侧升级 Press UI 时，无大量改动
• 业务组件的更新，要在 Press Plus 中进行，Press UI 不再维护、新增业务组件

2. 解决痛点

组件和逻辑是前端最重要的“资产”，将项目中业务组件沉淀到 Press Plus 中，有以下好处：

1. 复用
   • 业务库或子仓库的模式不利于复用
   • 分离业务逻辑等，让组件变纯粹，增强通用性、可维护性，进而提升效率
2. 分层
   • 核心组件、核心逻辑下沉
   • 物理隔离，权限分离，控制变化
   • 减少业务和组件的耦合，降低各自复杂度，并减少 bug
   • 避免被人乱改，防止影响线上，或违背设计理念的改动，保证业务和组件的“健康”
   • 减少 merge 时的冲突问题
3. 直观
   • 多端示例，易调试、易定位问题，易发现性能瓶颈
   • 详细的文档，易接入，易复用
   • 技术沉淀，技术积累，不断打磨组件细节

3. 应用场景

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

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

4. 如何使用

1. 安装npm包

npm i press-plus

2. 在页面中正常引入并使用

比如 message-detail 组件：

<template>
  <PressMessageDetail />
</template>

<script>
import PressMessageDetail from 'press-plus/press-message-detail/press-message-detail.vue'

export default {
  components: {
    PressMessageDetail, 
  }
}
</script>

3. 配置

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

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