vue全⾯介绍--全家桶、项⽬实例
简介
“简单却不失优雅，⼩巧⽽不乏⼤匠”。
2016年最⽕的前端框架当属Vue.js了，很多使⽤过vue的程序员这样评价它，“vue.js兼具angular.js和react.js的优点，并剔除了它们的缺点”。授予了这么⾼的评价的vue.js，也是开源世界华⼈的骄傲，因为它的作者是位中国⼈–尤⾬溪（Evan You）。
Vue.js 是⼀个JavaScriptMVVM库，是⼀套构建⽤户界⾯的渐进式框架。它是以数据驱动和组件化的思想构建的，采⽤⾃底向上增量开发的设计。相⽐于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上⼿并使⽤Vue.js；同时⽐起 React + Redux 相对复杂的架构，Vue.js 更加轻量级也更加容易上⼿，是初创项⽬的⾸选前端框架。Vue 的核⼼库只关注视图层，它不仅易于上⼿，还便于与第三⽅库或既有项⽬整合。并且作者是华⼈的关系，Vue拥有着对华⼈开发者最友好的api⽂档和官⽅教程。
调试插件
在vue调试⽅⾯，可以选择安装chrome插件vue Devtools。打开vue项⽬，在console控制台选择vue⾯板。
在Devtools⼯具中，可以选择组件，查看对应组件内的数据信息。也可以选择Vuex选项，查看该项⽬内Vuex的状态变量信息。
UI组件库
vue、React、Angular1对⽐
性能 对⽐
由此可见，Vue的性能是远好于Angular1，并且稍微优于React的。
社区拓展对⽐
Angular1的背后是Google，所以社区基础是不需要担⼼的，从Tutorial到StackOverflow的问题数量都可以反映出⽣态系统很完整。Angular1之后的2.0版本⼏乎是⼀个推翻重做的框架，对于使⽤了1.X版本的项⽬，想要平滑的升级过渡到2.0版本应该是⾮常困难的。现在Angular2的线上应⽤数量还不算太多，主流编码还是以1.X版本居多。这个版本化巨⼤的差异也间接影响到了开发者对于angular的信⼼。
Vue和React都有强⼤的社区⽀持。React有状态管理库Flux、ReduxVue，相应的，Vue有vuex。Vue
和 React 都提供了强⼤的路由库来应对⼤型应⽤。然⽽Vue的路由库和状态管理库都是由官⽅维护⽀持的。React 则是选择把这些问题交给社区维护，因此创建了⼀个更分散的⽣态系统。但相对的，React 的⽣态系统相⽐ Vue 更加繁荣。此外，Vue 提供了Vue-cli 脚⼿架，包括了Webpack，Browserify，甚⾄路由库，能让你⾮常容易地构建项⽬。
学习陡峭度对⽐
在指令与组件⽅⾯，Vue中将指令和组件分得更清晰。指令只封装 DOM 操作，⽽组件代表⼀个⾃给⾃⾜的独⽴单元，有⾃⼰的视图和数据逻辑。在 Angular1 中两者有不少相混的地⽅。在API与框架设计⽅⾯，angular1都⽐vue要复杂的多。就个⼈感觉⽽⾔，angular1和React的学习曲线会相对陡峭⼀些，⽽vue的编码⽅式会更趋近于前端开发者的编程习惯。
因为vue的作者是中国⼈，vue的官⽅⽹站、教程和api肯定是最完善、最易懂的。此外，每次⼤版本的发布，都会伴随着详尽的迁移说明⽂档，包含了很多详尽的阐述以及许多迁移的例⼦，甚⾄还有迁移⼯具。Angular的开发团队你们就不觉得脸红么…
Vue的使⽤⾮常的简单，创建⼀个本地的 .html ⽂件，然后通过如下⽅式引⼊ Vue：
这样就⽣成了vue的hello world应⽤。
渲染能⼒对⽐
ReactNative能使你⽤相同的组件模型编写有本地渲染能⼒的 APP（iOS 和 Android）。能同时跨多平台开发，对开发者是⾮常棒的。为了弥补这⽅⾯的不⾜，在2016年9⽉举办的JSConf2016期间，vue.js的作者尤⾬溪宣布加盟Weex团队担任技术顾问，双⽅将进⾏更紧密的合作，共建开发⽣态圈。Weex 是阿⾥的跨平台⽤户界⾯开发框架，Weex 的 JavaScript 框架运⾏时⽤的就是 Vue。在此之后，
在Weex 的帮助下，使⽤ Vue 语法开发的组件不仅仅可以运⾏在浏览器端，还能被⽤于开发 iOS 和 Android 上的原⽣应⽤。
Vue.js 的作者尤⾬溪表⽰：“Weex选择Vue作为其JavaScript运⾏时框架是让我⾮常⾼兴的⼀件事。Vue的组件开发模式已经被web开发者社区⼴泛 认可，⽽把Vue的开发体验拓展到原⽣平台则是我⼀直想做但没有余⼒去做的事情。⼀想到Weex将能让开发者们⽤Vue的语法去写跨 Web/Android/iOS三端的通⽤组件，就让我很兴奋。”
vue的缺点
Vue就这么好，难道没有缺点吗？当然有，vue虽然在16年⾮常⽕爆，但是相⽐于angular和react，不论是成熟度还是社区活跃度都还不是对⼿。此外，Vue明确声明了⾃⼰放弃了对IE8的⽀持。再看看现在的招聘⽹站上，有多少写了需要有angular经验，⽽⼜有多少写了需要vue经验，就可见vue的影响⼒相⽐于angular和react还差的很远。
vue全家桶及项⽬架构
推荐使⽤npm⼯具来安装vue-router
npm install vue-router
通过import导⼊并定义Vue模块、vue-router模块和需要使⽤的组件，在本例中，分别是Goods、Ratings和Seller组件。最后，如果在⼀个模块化⼯程中使⽤它，必须要通过 Vue.use() 明确地安装路由功能。
import Vue from’vue’
importRouter from’vue-router’
import Goods from ‘@/components/goods/goods’;
import Ratings from ‘@/components/ratings/ratings’;
import Seller from ‘@/components/seller/seller’;
Vue.use(Router); // 需要import Vue和Router，不然会报错undefined
通过const router= new VueRouter（）来定义⼀个路由，并传⼊对应的配置，包括路径path和组件components。
最后，在使⽤newVue来创建和挂载vue根实例的时候，记得要通过 router配置参数注⼊路由，即在router中export出来的路由对象，从⽽让整个应⽤都有路由功能。
vuex状态管理
Vuex 是⼀个专为 Vue.js 应⽤程序开发的状态管理模式。它采⽤集中式存储管理应⽤的所有组件的状态，并以相应的规则保证状态以⼀种可预测的⽅式发⽣变化。如前⾯所提到的，Vuex 已经集成到 Vue 的官⽅调试⼯具vue Devtools，可以轻松的查看项⽬中的Vuex状态变化情况。
假设有这样⼀个场景：我们的项⽬规模⽐较⼤，有多个⽗组件，每个⽗组件同时⼜包含多个⼦组件。如何保持对所有时间的追踪将变得很困难。到底哪个事件是哪个组件派发的，哪个组件该监听哪个事
件？⽗组件将变得和⼦组件耦合越来越严重，因为它需要明确的派发和监听⼦组件的某些事件。项⽬逻辑分散在各个组件当中，很容易导致逻辑的混乱，不利于我们项⽬的维护。
这就是 Vuex ⽤来解决的问题。 Vuex 的四个核⼼概念分别是：
The state tree：Vuex 使⽤单⼀状态树，⽤⼀个对象就包含了全部的应⽤层级状态。⾄此它便作为⼀个『唯⼀数据源(SSOT)』⽽存在。这也意味着，每个应⽤将仅仅包含⼀个 store 实例。单状态树让我们能够直接地定位任⼀特定的状态⽚段，在调试的过程中也能轻易地取得整个当前应⽤状态的快照。
reactnative开发
Getters：⽤来从 store 获取 Vue 组件数据。
Mutators：事件处理器⽤来驱动状态的变化。
Actions：可以给组件使⽤的函数，以此⽤来驱动事件处理器 mutations
Vuex和简单的全局对象是不同的，当Vuex从store中读取状态值的时候，若状态发⽣了变化，那么相应的组件也会⾼效的更新。并且，改变store中状态的唯⼀途径就是提交commit mutations。这样便于我们跟踪每⼀次状态的变化。只要发⽣了状态的变化，⼀定伴随着mutation的提交。
让我们来看⼀个最简单的vuex例⼦：
安装 Vuex 之后，让我们来创建⼀个 store。创建过程直截了当——仅需要提供⼀个初始 state 对象和⼀些 mutations：
现在，你可以通过 store.state 来获取状态对象，以及通过 storemit ⽅法触发状态变更：
vue-resource介绍
Vue-resource有体积⼩，⽀持IE9以上的浏览器，⽀持promise特性的特点。同样推荐使⽤npm来安装Vue-resource。
$ npm install vue-resource
在安装并引⼊vue-resource后，可以基于全局的Vue对象使⽤http，也可以基于某个Vue实例使⽤http。
在发送请求后，使⽤then⽅法来处理响应结果，then⽅法有两个参数，第⼀个参数是响应成功时的回调函数，第⼆个参数是响应失败时的回调函数。
vue-resource的请求API是按照REST风格设计的，它提供了7种请求API：
· get(url,[options])
· head(url,[options])
· delete(url,[options])
· jsonp(url,[options])
· post(url,[body], [options])
· put(url, [body],[options])
· patch(url,[body], [options])
vue⼯程⽬录结构
下图是⼀个简单的vue项⽬的⼤概结构，下⾯简要介绍⼀下每个⽂件夹中⼀般都会存放哪些内容。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。