press-plus v1.5.20

查看文档 | 查看示例

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. 减少业务和组件的耦合，降低各自复杂度，并减少bug
2. 增强组件可维护性，提升开发效率
   • 通过整理代码，合并属性，分离业务逻辑等，让组件变纯粹，增强可维护性，进而提升效率
3. 封装核心逻辑，控制变化
   • 不用担心外部合作人员改乱代码，以及解决冲突时的覆盖问题
4. UI问题定位简单
   • 三端代码同时发布，以及多种类型的示例，覆盖面全，容易发现UI问题，以及三端表现不一致问题
5. 可提升性能
   • 通过示例中的自定义变量，可定位性能瓶颈，并解决性能问题
6. 提高可复用性，可应用到其他项目
7. 技术沉淀，技术积累，不断打磨组件细节

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'],
}

5. 贡献指南

请查看这里。