前言:最近在学习Vue,感觉对vue+vuex+vue-router算是小小地入门了。想起前期最苦恼也是最费时的事,就是在每个阶段找到合适当前水平的资源或者demo,所以本文我根据我自己的体验,整理了一些资源,每个阶段跨度都较平缓,应该能比较顺畅地入门。
(以下链接后标明vue1的,表示博文及其demo是基于vue1,但原理基本是一样的,可以根据对博文的理解,将其demo由vue1改写为vue2,这样正好也可加深理解。)
基础入门
将官方文档的基础部分过一遍,不用太究细节,但也最好每个例子都自己跟着写一遍(组件部分不懂的先略过)。
- 官方文档:http://cn.vuejs.org/v2/guide/
- 入门博文demo:http://www.cnblogs.com/keepfool/p/5619070.html(vue1)
组件入门
根据以下的博文和其中的demo走一遍,对照官方文档,可基本了解组件的原理及使用。
- 组件入门上:http://www.cnblogs.com/keepfool/p/5625583.html(vue1)
- 组件入门下:http://www.cnblogs.com/keepfool/p/5637834.html (vue1)
(我将此部分的demo改写为vue2版本,可参见组件demo之vue2版本)
此时,对vue的基础知识基本有了了解,进阶部分可粗略过一遍或者暂时不看,等以后用到的时候再查文档。
vue-router
根据vue-router官方文档,结合以下博文,可基本了解vue-router的工作原理及应用。
- 官方文档http://router.vuejs.org/zh-cn/index.html
- vue-router入门博文demo:http://www.cnblogs.com/keepfool/p/5690366.html(vue1)
此时,可开始接触vue-cli,并将以上博文中的demo用vue-cli改写(博文中有提供普通版本和vue-cli版本)
- vue-cli入门:http://www.jianshu.com/p/2769efeaa10a
- vue-cli入门demo:http://www.jianshu.com/p/5d9b341d650f
vuex
首先看一遍官方文档,下面这边博文感觉写的还比较容易理解
vuex中比较多的设计到了es6的知识,所以遇到不懂得可以先了解一下对应的es6语法:比如参数结构和模块。其实vuex弄懂之后再回头想,发现其实很简单,就那么几个核心的概念。
这时候,差不多对vue+vuex+vue-router就有了一定的了解,可以到github上找一些简单的demo,跟着写一写,加深对知识的理解。文档里的进阶部分就可以碰到后去查查,慢慢就会知道的越来越多了!