从零开始的vue.js实战项目

一、实战项目的开发涉及方面

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)、可被继承的样式：字体，颜色等

七、图标字体的制作

参见：http://blog.csdn.net/aaa333qwe/article/details/77574017

八、数据mock

数据的mock可以采用爬虫去获取一些外卖网站的json数据。

九、CSS重置以及.eslintrc.js如何配置

代码为cssreset官网（ http://cssreset.com/）提供

eslint官网：https://eslint.org/

十、课程源码地址
https://github.com/attraction11/vue-sell-app
十一、参考资料

vue.js 官网：https://cn.vuejs.org/

vue-cli  https://github.com/vuejs/vue-cli

 vue-resource  https://github.com/pagekit/vue-resource

vue-router   https://github.com/vuejs/vue-router
better-scroll   https://github.com/ustbhuangyi/better-scroll
stylus  http://www.zhangxinxu.com/jq/stylus/

es6  http://es6.ruanyifeng.com/

eslint   https://eslint.org/