press-plus
Version:
126 lines (83 loc) • 4.37 kB
Markdown
<!-- 复制到 docs 下的时候，去掉“查看文档”和“查看示例” -->
<div align="center">
<img alt="logo" src="https://mike-1255355338.cos.ap-guangzhou.myqcloud.com/press%2Fimg%2Fpress-ui-avatar-transparent.png" width="150" style="margin-bottom: -25px;">
</div>
<h3 align="center">易用、灵活、基于 uni-app 的跨端组件库</h3>
---
[查看文档](https://novlan1.github.io/press-plus/) | [查看示例](https://novlan1.github.io/press-plus-demo/)
### 1. 介绍
`Press Plus` 是从 [Press UI](https://novlan1.github.io/docs/press-ui/) 中剥离的业务组件部分，为什么要分离呢，有下面几点考虑。
1. 基础组件是有限的，业务组件是无限的
2. 基础组件已十分稳定，业务组件频繁改动，并且越来越多，存在影响基础组件的风险
3. 持续维护包含大量组件，且高质量的组件库比较累，分离后，`Press UI` 继续追求 `100` 分，`Press Plus` 追求 `95` 分
4. 从用户角度看，使用者如果只用基础组件，完全没必要下载业务组件，而且后续业务组件越来越多，包体积也会越来越大
<img src="https://mike-1255355338.cos.ap-guangzhou.myqcloud.com/press/img/services.gif" width="600">
### 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、和平赛事、高能赛事、商户赛等项目中。
<img src="https://mike-1255355338.cos.ap-guangzhou.myqcloud.com/article/2023/4/pvp-esports-screenshort.png" width="300">
<img src="https://mike-1255355338.cos.ap-guangzhou.myqcloud.com/press%2Fimg%2Fhok-club-screenshot.gif" width="300">
<br/>
<!-- <img src="https://mike-1255355338.cos.ap-guangzhou.myqcloud.com/article/2023/10/own_mike_fa5d34c18c86ae412c.jpg" width="300"> -->
<!-- <img src="https://mike-1255355338.cos.ap-guangzhou.myqcloud.com/article/2023/10/own_mike_fb1530d4d6e351383c.jpg" width="300"> -->
<!-- <br/> -->
<img src="https://mike-1255355338.cos.ap-guangzhou.myqcloud.com/press%2Fimg%2Fown_mike_2bfb54a9ad6b9bc0ff.gif" width="600">
### 4. 如何使用
1. 安装`npm`包
```bash
npm i press-plus
```
2. 在页面中正常引入并使用
比如 `message-detail` 组件：
```html
<template>
<PressMessageDetail />
</template>
```
```ts
<script>
import PressMessageDetail from 'press-plus/press-message-detail/press-message-detail.vue'
export default {
components: {
PressMessageDetail,
}
}
</script>
```
3. 配置
需要在`vue.config.js`中配置下 `transpileDependencies`：
```js
module.exports = {
transpileDependencies: ['press-ui', 'press-plus'],
}
```