开发全流程
需求分析
脚手架工具
数据mock
架构设计
-
代码编写
-
代码质量:线上生产级别
-
代码开发及测试环节
UI标注
真实数据演示
-
代码规范
架构设计
组件抽象
模块拆分
代码风格统一
js变量命名规范
css代码规范
-
-
自测
编译打包
各个相关库和技术介绍
vue-resource做后端数据交互(ajax)官网
vue-router做前端路由,实现单页应用官网
列表滚动-第三方js库better-scrolll官网
最大程度组件化
html5的localstorage做收藏商家功能
-
图标字体的使用(Icon font就是将一套图标集以字体文件的形式封装,并通过CSS 3的@font-face作为Web Font调用)
移动端1像素边框问题技术处理
css sticky footer布局技术
flex弹性布局技术阮一峰
-
模块化,组件化开发技术
-
组件化
扩展html元素,封装可重用代码
页面拆分成区块,区块对应组件,每个组件都有一个v-modal
-
组件设计原则
页面上每个独立的可视/可交互区域视为一个组件
每个组件对应一个工程目录(css,js,模板),组件所需要的各种资源在这个目录下就近维护(.vue文件)
页面不过是组件的容器,组件可以嵌套自有组合形成完整的页面
-
vue框架官网
需要es6语言
基于vue-cli脚手架-搭建基本代码框架
使用webpack构建工具
es6+eslint:eslint:es6代码风格检查工具(保证团队代码风格)
二.介绍vue和MVVM
关于MVVM框架
MVVM模式是通过以下三个核心组件组成,每个都有它自己独特的角色:
Model - 包含了业务和验证逻辑的数据模型
View - 定义屏幕中View的结构,布局和外观
ViewModel - 扮演“View”和“Model”之间的使者,帮忙处理 View 的全部业务逻辑
关于vue和MVVM
dom的数据通过vue的directives来改变,所以直接改变model的数据就可以直接将数据反映在dom上面
另外一方面,vue有提供dom 监听来自dom的事件,然后去改变model数据
把一个普通 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter
每个组件实例都有相应的 watcher 实例对象,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter 被调用时,会通知 watcher 重新计算,从而致使它关联的组件得以更新。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。