Vue学习路线

前言：学习Vue已经两个月了，目前前端的框架用得比较多的就是Bootstrap和Vue，而Bootstrap是开发人员用得较多，由于较为简单，上手也快。Vue是目前很火的数据驱动框，17年的时候就开始火了。

以前我用Bootstrap框架，转学习Vue的时候仍是花了一点学习成本的。

既然你们会看这篇文章，那么确定是vue的学习者了，或是遇到的瓶颈，或者刚刚开始学，不知道如何快速起步，本篇文章将带领你们在最短的时间内构件一个学习Vue的学习路线。

1、Vue基础

1. 对于没有接触过es6和webpack的童鞋来讲，不建议直接用官方的脚手架vue-cli构件项目。

2. 先按文档顺序最少学习完组件那一章。直接在html文件中引入vue.js开始学习,了解vue的基础指令和语法。

3. vue的生命周期很重要，了解这点之后能够免去不少问题。

4. 学完这些能够作一些练手的小项目。

5. 如今能够开始学习使用vue-cli构件项目了，学习组件化以前，推荐先看一下es6关于模块的介绍。阮一峰《ECMAScript6》 Module

6. 光会这些仍是不够的，还得会一些npm基础，知道如何用git-bash来安装依赖，会一些经常使用的命令。这方面的知识能够参阅npm入门文档

7. 看完这些就能够试着将以前的写的demo用搭建的vue-cli来实现。

8. 多看看组件那里，看看如何在vue-cli中怎么实现组件化，说白了，vue玩的就是组件。

9. 到这里vue基础篇就结束了。你还能够有条件的参阅剩下的官方文档里面的进阶篇，若是时间有限，就直接进入vue-router

2、Vue-router

1. 和以前同样，推荐直接用html+js过一遍文档

2. 对路由导航钩子得好好看一看。

3. 看完文档就能够上手vue-cli，通常新手在这几天都会死活跑不出来。

4. 最直接的方法就是去github上搜一些关于vue-router2.0的demo，看如何构件路由，如何构件项目目录。

５. 若是能跑出来，就能够作一些小项目了，好比写一个知乎日报啊

，这些demo在github上不少。

7. 能够结合一些组件库写demo，这样能够更加了解组件化。好比饿了么团队的Element、mint-ui

3、Vuex

什么是vuex？

Vuex 是一个专门为 Vue.js 应用设计的 状态管理模型 + 库。它为应用内的全部组件提供集中式存储服务，其中的规则确保状态只能按预期方式变动。说白了就是控制应用的一些全局状态。状态改变了，对应的视图也会改变。

1. 在学习Vuex时，会有一些ES6特性，当遇到这些时，最好不要一带而过，去好好看一看这些es6特性。

2. 好比在学习Action时能够看看ES6新增的Promise和参数解构。

3. 实践的方法同样是先看别人别人写的代码，好比官方的购物车实例的应用结构。

4. 把以前写的demo优化一下，有些地方能够用用vuex。

5. vuex主要是用来对不一样组件间进行通讯，它构建了一个Vue实例的全局数据与方法，这些数据与方法能够在该Vue实例的全部组件中getter与setter。

到此，恭喜你已经成功入门Vue了。还学会了一点ES6,，附带一点Webpack。

若是你刚接触Vue，这篇文章可能对你帮助不大，接下来我会写一些具体使用的文章。