press-next/README.md

Vue3 组件库，支持 Composition API

<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://mobile.woa.com/press-next/) | [查看示例](https://mobile.woa.com/press-next-demo/)

### 1. 介绍

`Press Next` 是和 [Press UI](https://mobile.woa.com/press-ui/)、[Press Plus](https://mobile.woa.com/press-plus/) 一脉相承的业务组件库。

为了向下兼容，`Press UI` 和 `Press Plus` 不得不使用 Vue2 + Vue3 的公共语法，但是业务不断向前，不可能一直用选项式 API，因此必须推出支持组合式 API 的组件库。

### 2. 解决痛点

将项目中业务组件沉淀到 `Press Next` 中，有以下好处：

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


### 3. 应用场景

`Press Next`可应用于 Vue3 的`uni-app`项目，或者普通的 H5 项目。


### 4. 如何使用

1. 安装`npm`包


```bash
npm i press-next
```


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

比如 `schedule-item` 组件：

```html
<template>
  <PressScheduleItem />
</template>
```

```ts
<script setup lang="ts">
import PressScheduleItem from 'press-next/press-schedule-item/press-schedule-item.vue'
</script>
```

### 5. 贡献指南

请查看[这里](./CONTRIBUTING.md)。