介绍

# 引言


> 官方指南假设你已熟悉关于 HTML、CSS、JavaScript 和 Vue的基本知识。如果你对Vue了解不深入，立刻上手猎豹移动平台的开发可能不是一个好的主意——掌握好Vue的基础知识再来吧！之前有Vue Web应用的开发经验会有所帮助，但是和猎豹移动开发仍有一定的差别。

## 前端体系的构成

猎豹移动前端体系主要包含六大部分：**开发脚手架**、**JSAPI**、**基础组件**、**业务组件**、**业务模板**、**调试器**。其中**开发脚手架**、**JSAPI**、**调试器**为基于猎豹平台所开发的API和工具，仅限于猎豹平台使用。前端组件则遵循基本的Web规范和Vue开发规范，除了**猎豹专有组件**外，与普通Vue组件并无本质区别。

## 前端体系组成一览

> 初次上手猎豹平台的开发者也许对前端体系的组成部分感到困惑。下面将对每一块组成部分进行逐一介绍，并将这些内容串联起来，使各位开发者对猎豹移动前端开发体系有个更完整的认识。


### 开发脚手架

猎豹移动开发脚手架是一个基于Node.js平台的CLI命令行工具，用于实现猎豹项目的前端资源构建打包和本地开发。脚手架所构建输出的工程是一个典型的**多页应用**，有别于常规的Vue单页应用。

猎豹平台所发布的前端资源以离线包zip格式文件形式存在，脚手架亦提供了命令行，用于创建zip离线包。zip离线包在客户端环境下，会自动解压成常规的前端静态资源。

脚手架以`npm`包形式存在，包名为`@ynet/ynet-cli`。

### JSAPI

猎豹移动平台封装了一系列常用的原生组件供前端调用，覆盖了绝大部分开发场景。通常情况下，前端调用客户端原生功能一般通过调用JSBridge API来完成。而前端JSAPI是在JSBridge API基础上进行了再一层的封装，增加了错误返回、rpc调用以及一些前端调用的预处理，使得开发调用更为简洁高效。

JSAPI以`npm`包形式存在，托管在私有库中，包名为`@ynet/ynet-bridge`。

### 基础组件

组件库主要包含两大部分：**第三方基础组件**和**猎豹专有组件**。其中第三方组件为面向金融场景的Vue移动端UI组件库[Mand Mobile](https://didi.github.io/mand-mobile/#/zh-CN/docs/introduce)。

#### 为什么使用第三方基础组件？

Mand Mobile 是由滴滴出行前端团队所开发的面向金融场景设计的移动端组件库，根据我们一段时间的调研，这套组件基本**覆盖了绝大部分金融场景**，**风格高度统一**，**UI样式可配置**，完全可以轻松适应不同的设计风格。加上部分项目组对这套组件库认可度很高，于是我们决定将Mand Mobile作为我们的前端基础组件库。

#### 猎豹专有组件包含哪些内容？

猎豹专有组件主要包含两部分，一部分是对Mand Mobile组件的补充，另一部分是针对猎豹平台专有功能进行的一个Vue组件化封装。

猎豹专有组件以`npm`包形式存在，托管在私有库中，包名为`@ynet/ynet-components`。

### 业务组件

#### 什么是业务组件？

虽然基础组件可以覆盖绝大部分应用场景，但是行业内仍有一些使用频率极高的业务组件，如：**转账用户列表**、**银行卡OCR扫描识别** 等业务组件。这类组件的特征是出现频次高，复杂度高、UI差异大，难复用。

所以这部分组件内容我们以未封装源码片段形式存在，托管在静态资源服务器仓库中。组件会有配套的文档及详细的代码注解，便于开发者根据项目实际需求自定义进行修改、封装并用于项目中。

### 业务模板

#### 为什么要有业务模板？

通过观察我们能发现，在金融应用中，有一些业务流程是必不可少的，且**业务逻辑相似度非常高**。如：用户注册、转账、修改密码等。在开发过程中，这些流程页面如果从零开始构建的话，远不如在现成的业务模板基础上二次开发效率来得高。这也是为什么我们需要业务模板的原因。

业务模板以单个离线包工程源码的形式存在，可无缝添加到已有项目中。同样模板代码内部也会有完善的注解，以及配套的说明文档。

> **注意：**
业务组件和业务模板都是基于基础组件进行开发，故对Mand Mobile组件库和猎豹专有组件库有一定依赖。


### 调试器

#### 什么是调试器？

在整个猎豹移动前端体系中，调试器也是其中一环。由于猎豹移动项目开发依赖于客户端环境的各种方法和API，使得脱离手机开发变得困难。

由于缺乏Web开发的桌面环境，项目的Debug工作无法像一个纯粹的Web应用一样简单。所以针对这个问题，我们推出了和猎豹配套的桌面应用工具，**模拟了大部分客户端JSAPI的功能和方法**，同时还配套了**数据Mock工具**，使得在桌面开发猎豹移动项目，也能获得完整的开发体验。

与此同时，调试器是基于Chromium核心进行开发的，和Chrome桌面浏览器一样也能体验到完整的Developer Tools工具，开发者可以像调试Web应用一样调试猎豹移动应用，这也符合前端开发者的使用习惯。