vueJS项目实战.ppt

《vueJS项目实战.ppt》由会员分享，可在线阅读，更多相关《vueJS项目实战.ppt（23页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、VUEJS 2.0 项目实战主讲人：陈 乾Webpack+vue-router+vue-reource目 录01020304Vuejs介绍Vue-cli开启项目项目实战开发项目编译打包今年来前端的开发趋势旧浏览器逐渐淘汰，移动端需求增加IE6-IE8不支持ES5特性今年来前端的开发趋势旧浏览器逐渐淘汰，移动端需求增加IE 9+chromesafarifirefox完全支持ES5特性今年来前端的开发趋势旧浏览器逐渐淘汰，移动端需求增加前端交互越来越多，功能越来越复杂高大上的技术库和框架酷炫的运营活动页面H5小游戏复杂的WEB应用项目（功能完善，界面繁多）比如新闻趣味站、在线购物平台、社交网络、视

2、频分享平台、音乐互动社区、金融信贷应用、打车出行平台今年来前端的开发趋势旧浏览器逐渐淘汰，移动端需求增加前端交互越来越多，功能越来越复杂架构从传统后台MVC向REST API+前端MV*迁移MV*MVCMVPMVVMVue.jsMVVM框架ViewViewModelModel视图通讯数据DOM观察者JavaScript对象MVVM框架针对具有复杂的逻辑前端应用提供基础的架构抽象通过Ajax数据持久化，保证前端用户体验MVVMAngurlar.jsReact.jsVue.jsVueJS是什么?2014初年开源vuerouter vueresourceVueJS是什么?它是一个轻量级MVVM框架数

3、据驱动+组件化的前端开发Github 超过25K+的star 熟，社区完善对比Angular ReactVue.js更轻量，gzip后大小只有26K（Angular 56K,React 44K）Vue.js更易上手，学习曲线平稳吸收两家之长，借鉴了angular的指令和react的组件化Vue.js核心思想数据驱动组件化数据驱动DOM是数据的一种自然映射数据响应原理数据（model）改变驱动视图（view）自动更新数据响应原理数据（model）改变驱动视图（view）自动更新组件化扩展HTML元素，封装可重用的代码组件设计原则页面上每个独立的可视/可交互区域视为一个组件每个组件对应一个工程目录，组件所需的各种资源在这个目录下就近维护页面不过是组件的容器，组件可以嵌套自由租个形成完整的页面Vue-cli开启Vue.js项目目录结构本地调试代码部署热加载单元测试Vue-cli:Vue-cli开启Vue.js项目GitHub地址：https:/ install-g vue-cli）3.vue init webpack 名字4 进入项目目录5 npm install6 npm run dev目录结构讲解Vue-cli+WebpackLink:webpack.github.io组件开发项目打包感谢聆听！