一、实战项目的开发涉及方面
1、需求分析
2、脚手架工具
3、数据mock
4、架构设计
5、代码编写
6、自测
7、编译打包
二、功能技术分析
1、vue-resource 与后端做数据交互
2、vue-router 做前端路由,实现单页面应用
3、better-scroll 做列表的滚动
4、最大程度组件化
三 、学习目标
1、掌握vue.js在实战项目中的运用
2、学会使用vue.js完整开发移动端APP
3、学会组件化、模块化的开发方式
四、学习内容
1、vue.js框架的介绍
它是一个轻量级的MVVM框架,体积很小Gzip之后只有20K左右。
数据驱动+组件化的前端开发,社区(GitHUb、论坛、聊天室、Twitter)完善
2、vue-cli 脚手架 搭建基本代码框架(node包)----确保node版本 > v4+
它能够完成目录结构、本地调试、代码部署、热加载、单元测试等功能。
3、vue-router 官方插件管理路由
4、vue-resource 官方插件用于和后端进行Ajax通信
5、webpack构建工具
6、es6+eslint eslint是es6代码风格检查工具
7、flex弹性布局
8、css sticky footer
9、工程化、组件化、模块化
10、移动端常用的开发技巧
五、近些年的前端开发的趋势
1、旧的浏览器被淘汰,移动端需求增加
2、前端交互越来越多,功能越来越复杂
3、架构从传统后台MVC向REST API+前端MV*迁移
六、MVVM框架
1、MVVM框架主要包含了View、ViewModel 与 Model。
其中Model主要是数据部分,对应前端的一些JavaScript对象
View是视图部分,对应前端的DOM
ViewModel是连接视图和数据的中间件。实现一个观察者的功能。观测视图和数据的变化,实现数据的双向绑定。
2、应用场景
针对具有复杂交互逻辑的前端应用
提供基础的架构抽象
通过Ajax数据持久化,保证前端用户体验。应为刷新页面的代价太大了。
六、前端开发技术选型几要素
1、技术社区的活跃度
2、对比vue.js、react.js、angular.js
(1). vue.js更加地轻量,gzip后只有20K+ , react.js gzip后44K, angular.js gzip后56K
(2). vue.js 更易上手学习曲线比较地平稳,借鉴了angular.js的指令与react.js的组件化,同时具有特性计算属性
3、vue.js的核心思想
(1)、数据驱动
DOM是数据的一种自然映射。数据响应的原理是viewModel监测数据和视图的变化自动更新。在vue里,你只需要改变数据,vue通过directives指令去对dom做一些封装,当数据发生变化,会通知指令去修改对应的dom,数据驱动dom变化,dom是数据的一种自然映射,vue还会对dom做一些监听,当我们修改视图的时候,vue监听到这些dom的变化,从而改变数据。
(2)、组件化
目的:扩展HTML元素,封装可重用的代码。
组件的设计原则:页面上每个独立的可视/可交互区域都可以作为一个组件。每个组件对应一个工程目录,组件所需要的各种资源在这个目录下就近维护。页面不过是组件的容器,组件可以嵌套自由组合形成完整的页面。
六、代码风格规范
1、注释
单行注释// 后留一个空格。
多行注释/* 内容 */ 中 ‘内容’两侧各留一个空格。
2、css样式
(1)、布局相关的样式:display、position
(2)、宽高相关的样式:width、height、line-height
(3)、可被继承的样式:字体,颜色等
七、图标字体的制作
参见:/aaa333qwe/article/details/77574017
八、数据mock
数据的mock可以采用爬虫去获取一些外卖网站的json数据。
九、CSS重置以及.eslintrc.js如何配置
代码为cssreset官网(/)提供
eslint官网:/
十、课程源码地址
/attraction11/vue-sell-app
十一、参考资料
vue.js 官网:/
vue-cli /vuejs/vue-cli
vue-resource /pagekit/vue-resource
vue-router /vuejs/vue-router
better-scroll /ustbhuangyi/better-scroll
stylus /jq/stylus/
es6 /
eslint /