写在前面：项目是学习B站up主 手把手撸码前端

租车项目业务

在公司要开发一个新模块，新项目时。首先要进行头脑风暴。对该业务的所有功能进行发散思考。

百度脑图，租车项目业务头脑风暴。

需求文档

产品经理的头脑风暴

  • 后台管理：统计、财务、订单系统、车辆管理、会员管理等
  • 在线客服
  • 业务层面：让会员租车、停车场、收费方式
  • 会员功能：会员信息、注册、登录、找回密码、会员需要进行资料上传审核、售后、违规处罚
  • 优惠券：新会员注册(赠送500；券时限)、节假日活动、限时活动
  • 汽车管理： 品牌、燃料类型
  • 租车订单：订单列表
  • 停车场管理： 全国的地理区域：停车场、露天等
  • 第三方合作： 4S店、汽车维修厂‘
  • 推广

研发

产品经理将需求文档发给研发部；研发部讨论。UI根据需求文档的一些原型图开始设计，后端开始做一些常规功能比如会员管理等，前端耍。

软件推荐：蓝湖： 产品UI协同研发

项目流程图

alt

alt

项目框架图

前端要从需求分析中得到出的，整合优化。

百度脑图： 框架图

各种原型绘制

项目页面草图

测试用例编写

  • 登录模块：用例编号、用例名称、操作步骤
  • 注册模块
  • 订单模块

初始化项目、申请高德Key、初始化地图

  1. vue ui 创建项目

    vue2.0 + vuex + router + element ui + webpack

  2. 高德地图key的申请 点击高德地图开发者官网。注册登录，进入控制台。应用程序，添加key

  3. vue-amap的引入。他不仅会包含大部分原生高德地图的sdk，并且还提供了一些简便的方法。对于大多数 vue-amap 组件，都有 init 这个 event，参数为高德的实例，通过这样暴露高德实例的方式，开发者能够非常自由地将原生 SDK 和 vue-amap 结合起来使用。

alt alt

  1. 在定制化程度较高的项目中，开发者可能只想通过 vue-amap 引入高德地图，而部分实例化的操作直接基于高德地图的 sdk 完成。这个时候就需要 lazyAMapApiLoaderInstance。异步加载。

alt