介绍开发流程以及相关技术

开发全流程

1. 需求分析

2. 脚手架工具

3. 数据mock

4. 架构设计

5. 代码编写

   1. 代码质量:线上生产级别

      1. 代码开发及测试环节

         1. UI标注

         2. 真实数据演示

      2. 代码规范

         1. 架构设计

         2. 组件抽象

         3. 模块拆分

         4. 代码风格统一

         5. js变量命名规范

         6. css代码规范

6. 自测

7. 编译打包

各个相关库和技术介绍

1. vue-resource作后端数据交互(ajax)官网

2. vue-router作前端路由,实现单页应用官网

3. 列表滚动-第三方js库better-scrolll官网

4. 最大程度组件化

5. html5的localstorage作收藏商家功能

6. 图标字体的使用(Icon font就是将一套图标集以字体文件的形式封装，并经过CSS 3的@font-face做为Web Font调用)

   1. 科普1

   2. 科普2

7. 移动端1像素边框问题技术处理

8. css sticky footer布局技术

9. flex弹性布局技术阮一峰

10. 模块化,组件化开发技术

    1. 组件化

       1. 扩展html元素,封装可重用代码

       2. 页面拆分红区块,区块对应组件,每一个组件都有一个v-modal

    2. 组件设计原则

       1. 页面上每一个独立的可视/可交互区域视为一个组件

       2. 每一个组件对应一个工程目录(css,js,模板),组件所须要的各类资源在这个目录下就近维护(.vue文件)

       3. 页面不过是组件的容器,组件能够嵌套自有组合造成完整的页面

11. vue框架官网

12. 须要es6语言

13. 基于vue-cli脚手架-搭建基本代码框架

14. 使用webpack构建工具

15. es6+eslint:eslint:es6代码风格检查工具(保证团队代码风格)

二.介绍vue和MVVM

关于MVVM框架

MVVM模式是经过如下三个核心组件组成，每一个都有它本身独特的角色：

• Model - 包含了业务和验证逻辑的数据模型

• View - 定义屏幕中View的结构，布局和外观

• ViewModel - 扮演“View”和“Model”之间的使者，帮忙处理 View 的所有业务逻辑

科普1
科普2

关于vue和MVVM

dom的数据经过vue的directives来改变,因此直接改变model的数据就能够直接将数据反映在dom上面

另一方面,vue有提供dom 监听来自dom的事件,而后去改变model数据

把一个普通 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象全部的属性，并使用 Object.defineProperty 把这些属性所有转为 getter/setter

每一个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程当中把属性记录为依赖，以后当依赖项的 setter 被调用时，会通知 watcher 从新计算，从而导致它关联的组件得以更新。