移动web前端重构---原项目梳理

一、原项目梳理

1、页面风格

 1.设计多标准

   项目经历了【程序员自主研发】→【集团UI设计】→【余月娇设计】三阶段，视觉标准不一样。以列表为例：

image.png

差异性：

image.png

 2.公共业务模块

     公共业务模块在多个主题下的风格不一致，以在【妇儿公众号】进入【预约挂号】中为例：

     【粉色调】→【企业品牌色】![image.png](https://img.haomeiwen.com/i4801902/ed89dd7c25ffc511.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

2、交互多标准

以【表单输入】为例：

image.png

3、前端框架、模板引擎两套技术栈

YLAPP单应用时使用Jquery为技术栈。

妇儿公众号、盆底康复使用Vue为技术栈，优化了数据双向绑定功能，详情如下： 

image.png

4、第三方库、组件、插件

 不同技术栈使用的第三库、组件、插件不一样，详情如下：

 ![image.png](https://img.haomeiwen.com/i4801902/ab23453f1128591f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

5、项目结构多标准

 项目结构是针对代码组织结构，梳理了项目各重要的文件夹和文件夹对应的内容和作用。详情如下：

YLAPP：

目录名含义模糊不明确

├── statics // 静态资源文件，包含js、css、图片资源

│ ├── css // css

│ ├── fonts // 第三方字体图标

│ ├── js // javacsript公用类库

│ │ ├── AUXAPP //自定义工具类库，用于复用

│ │ ├── components //自定义业务插件类库

│ │ ├── core //包含基础类用到的所有底层插件类库

│ │ ├── module //业务javascript脚本

│ │ ├── plugins //第三方插件

妇儿公众号、盆底康复：

采用webpack后，实现组件化与模块挂开发后，优化了项目目录结构，便于团队协作。

├── build // webpack配置文件

├── config // 项目打包路径

├── dist // 上线项目文件，放在服务器即可正常访问

├── screenshots // 项目截图

├── src // 源码目录

│ ├── api // 数据交互统一调配，对接口进行统一管理

│ │ ├── user.js // 获取数据的统一调配文件

│ │ └── tempdata // 开发阶段的临时数据

│ ├── assets // 公共静态资源文件，非模块化资源

│ │ ├── css // css

│ │ ├── images // 图片

│ │ ├── less // less脚本

│ │ ├── scss // scss脚本

│ ├── components_modules //外部模块资源

│ ├── components //项目公共模块资源

│ │ ├── common // 公共组件

│ │ │ ├── alertTip.vue // 弹出框组件

│ │ │ ├── loading.vue // 页面初始化加载数据的动画组件

│ │ ├── footer

│ │ │ └── foot.vue // 底部公共组件

│ │ │ └── foot.img // 文件

│ │ └── header

│ │ └── head.vue // 头部公共组件

│ │ └── logo. img // 头部公共组件

│ ├── config // 基本配置

│ │ ├── env.js // 环境切换配置

│ ├── pages //页面资源

│ ├── views //项目模块资源

│ ├── plugins // 引用的插件

│ ├── router

│ │ └── router.js // 路由配置

│ ├── store // vuex的状态管理

│ │ ├── action.js // 配置actions

│ │ ├── getters.js // 配置getters

│ │ ├── index.js // 引用vuex，创建store

│ │ ├── modules // store模块

│ │ ├── mutation-types.js // 定义常量muations名

│ │ └── mutations.js // 配置mutations

├── favicon.ico // 图标

├── 项目名称

├── admin

├── mobile