vue项目实战

vue.js
技术栈、当前最火的MVVM框架
数据驱动、组件化
轻量、简洁欸、高效

需求分析
脚手架工具
数据mock
架构设计
代码编写
自测
编译打包

UI标注
真实数据演示

架构设计
组件抽象
模块拆分
代码风格统一
JS变量命名规范
CSS代码规范

tudomvc
vue-cli脚手架搭建基本代码框架
vue-router官方插件管理路由
vue-resourceajax通信
Webpack构架工具
es6 + eslinteslint:es6代码风格检查工具
js库better-scroll

工程化、组件化、模块化的开发方式

flex弹性布局
cssstickyfooter
酷炫的交互设计

vue.js

就浏览器组件淘汰,移动端需求增加
前端交互越来越多,功能越来越复杂

后台mvc 向rest api + 前端 mv*迁移

MVVM框架

针对具有复制交互逻辑的前端应用

提供基础的架构抽象

通过ajax数据持久化,保证前端用户体验

view==视图==DOM----- viewmodel==通讯==观察者-------- model==数据==javascript对象


什么是vue.js

2014开源

他是一个轻量级mvvm框架
数据驱动+组件化的前端开发
Github超过25k+的str数,社区完善、issue、论坛

mvvvmangular.jsreact.jsvue.js

更易上手,学习曲线平稳
更轻量,gzip后大小只有20K+
吸取俩家之长,借鉴了angular的指令和react的组建化

数据驱动

DOM是数据的一种自然映射

DOM Listeners
directives
对数据双向绑定

Watcher指令

组件化

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

每个组件对应一个工程目录,组件所需要的各种资源在这个目录下就近维护

页面不过是组件容器,组件可以嵌套自由组合形成完整的页面

Vue-cli Vue的脚手架工具
安装
【vue项目实战】node -v(v4.4.5)

npm install -g vue-cli

查看

vue list

创建一个项目

vue init webpack sell

name、description、y、Standard、n、n

ls

cd project-name
npm install
npm run dev

node_modules








    推荐阅读