1、Vuehtml
系列一已经用vue-cli搭建了Vue项目,此处就不赘述了。vue
2、Vue-routerios
Vue的路由,先献上文档(https://router.vuejs.org/zh-cn/)。git
路由在全家桶里面定位是什么呢,建立单页应用!简单!咱们知道Vuejs是一系列的组件组成应用,既然是组件那么就须要组合起来,将组件(components)映射到路由(routes),而后告诉 vue-router 在哪里渲染它们!github
咱们通常在APP.VUE文件里面使用router-view来告诉router在哪里渲染组件,以下图(keep-alive被我注释了后续系列继续讲):ajax
组件的配置:(此处有多个文件夹是便于管理大的项目,模块化。对于小项目能够只要router下面的index.js就行)。vue-router
至于路由配置中的resolve和require还有export default能够参考这篇文章(http://www.cnblogs.com/Nutrient-rich/p/7047877.html和Vue按需加载提高用户体验)vuex
路由按照上面的写法就配置好了各个路由,那么在页面之间须要路由跳转怎么作呢$router.push()和$router.replace()就能作到了。vue-cli
路由嵌套:在子组件里面再增长一个router-view,而后配置成【路由嵌套在动画的时候会有坑,后续更新】axios
至此项目中用到的路由基本能搞定了。
3、vuex状态管理
仍是先献上文档(https://vuex.vuejs.org/zh-cn/)
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。什么是状态管理?能够简单理解为管理数据流,多页面共享一个data库(全局)。
何时用我就借用文档语言了:
说到vuex就确定会有State、Actions、Mutations、Getters、Moudles
(1)State
Vuex 使用 单一状态树 —— State,用一个对象就包含了所有的应用层级状态。就是放页面共享数据的地方。(私有数据仍是放本身.vue文件更好)
(2)Actions
Action 相似于 mutation,不一样在于:
- Action 提交的是 mutation,而不是直接变动状态。
- Action 能够包含任意异步操做。
就是说异步方法放入Actions,如ajax请求,求情获取到数据以后显示提交mutation里面的方法来改变state。
(3)Mutations
更改 Vuex 的 store 中的状态的惟一方法是提交 mutation。一条重要的原则就是要记住 mutation 必须是同步函数。组件中使用 this.$store.commit('xxx')
提交,在action里面使用commit('xxx')
提交。
(4)Getters
有时候咱们须要从 store 中的 state 中派生出一些状态,Vuex 容许咱们在 store 中定义『getters』(能够认为是 store 的计算属性)。Getters 接受 state 做为其第一个参数:
Getters 会暴露为 store.getters
对象供调用。
(5)Modules
简单点说就是为了方便操做和管理,模块化。
因为使用单一状态树,应用的全部状态会集中到一个比较大的对象。当应用变得很是复杂时,store 对象就有可能变得至关臃肿。
为了解决以上问题,Vuex 容许咱们将 store 分割成模块(module)。每一个模块拥有本身的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行一样方式的分割。
最后上几张图方便查看具体写法:
4、axios
就是封装的ajax,能够根据本身的项目状况再进行封装,而后action中调用。具体能够参考https://github.com/mzabriskie/axios
结语:再接再砺!