Vue2入门路线及资源

Posted 2020-09-27 小丸子的城堡

前言：最近在学习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

首先看一遍官方文档，下面这边博文感觉写的还比较容易理解

• 博文：https://segmentfault.com/a/1190000007516967

vuex中比较多的设计到了es6的知识，所以遇到不懂得可以先了解一下对应的es6语法：比如参数结构和模块。其实vuex弄懂之后再回头想，发现其实很简单，就那么几个核心的概念。

 

这时候，差不多对vue+vuex+vue-router就有了一定的了解，可以到github上找一些简单的demo，跟着写一写，加深对知识的理解。文档里的进阶部分就可以碰到后去查查，慢慢就会知道的越来越多了！