VUE 学习路线

分享VUE学习路线

1. 前言：原生JS基础较差的可以先去补红宝书，ES6不熟悉的我建议先别接触VUE，先去看完ES6再去学VUE会容易十分多。
2. 官方文档刷一遍，前期只看官方文档就足够了，还有前期别用cli脚手架创建项目去学，不然可能一上来接受不了。前期直接用script标签引入js跟着官网写基础demo就好。看完一遍文档对组件概念依然不清晰是没关系的，这个得靠实战视频去理解（可以的话建议多刷一两次官方文档再去看视频）。还有生命周期的图片保存下来，虽然这个阶段可能理解不深，但是真的是十分重要。随着后面的学习再继续回味。
3. 官方文档刷完基础的部分就可以先停下来去看实战视频。（即官网的VUE生态系统可以先放着不看，刷完视频后再去看）
4. 初级入门 VUE 这里推荐慕课网的一个仿去哪儿的视频，dell 老师讲课逻辑十分清晰，入门VUE十分适合，从视频里可以学习到很多东西，不单止VUE的知识。学完整个去哪儿实战视频之后基本对组件化开发，路由等有较为清晰的概念。虽然视频里也有用到VUEX，但是这个点总体来说依然十分模糊。
5. 接下来继续回官方文档看教程，重新刷一遍基础教程，结合视屏里学到的再去加深理解，看完后就可以接着去看VUE生态系统里的VUE - ROUTER 了，router这里需要用心去开，知识点还是十分多的并且有用的。子路由，alias，redirect等，学会如何用meta做用户权限限制，还有导航守卫几个hooks要知道。至于 VUEX 依然可以先跳过，此时对VUEX的理解其实依然十分薄弱。
6. 上面步骤做完后，对于简单的项目用VUE开发基本不会有太大问题了，所以此时应该自己去开发一个简单的项目，这里可以运用上子路由，权限控制等相对高级一点的知识。并且在项目里学会如何对一些工具进行基础封装（如我在这一步对axios进行了一些基础的封装，可以在任何地方直接通过vue.$get / $post进行http请求，对element-ui的消息提示进行了一些基础封装，调用只需要传入message即可，具体封装看你开发项目时的需求），然后在这里可以还可以学到一些utils封装，知道如何export出一个可以直接通过Vue.use(util)的工具。这里项目开发过程要是没有后端配合，可以自己在本地mock一些基础数据，相信在去哪儿实战中也知道如何mock了，可以有后台配合的情况下建议还是直接跟后台配合开发，因为这会让你更真实的模拟项目环境（完美踩坑，axios发post请求默认content-type为application/json 导致后台接收不了数据，这里引入qs对payload进行转换，修改content-type为application/x-www-form-urlencoded）
7. 此时可以说是简单入门VUE了，但是对于VUEX依然不理解。于是我再去官网生态系统看了VUEX文档。
8. 接下来再去学习慕课网的一个企业级仿音乐APP实战视频，视频有点旧，老师的技术水平毋容置疑，但是讲课的水平可能就稍微差了一点点，不过也感谢这个视频有点旧，所以很多方面都要我们自己动手去解决一些兼容性问题，这个视频学完之后对VUEX基本掌握了。（这个实战项目视频十分长，学到的东西十分多，所以性价比还是十分高的，而且效果十分赞，这个老师也是十分厉害！）
9. 还有就是VUE对原生JS的要求相对高，所以最终结论是前端一定要去看红宝书！