如何快速上手一个新技术之vue学习经验

　　碰到紧急项目挪别人的vue项目过来直接改，但是vue是18年初看过一遍，18年底再来用，早就忘到九霄云外了，结果丢脸的从打开vue开始学，虽然之前在有道云笔记做了很多记录，然后没有系统整理。所以借这次机会锻炼自己快速上手能力，顺便整理vue相关的资料。

如何快速上手，三个诀窍：去碰问题+提出问题+有效筛选搜索信息。

大概过程就是:

打开index.html没反应——>搜索怎么打开vue项目？——>打开页面后，发现页面和代码里节点不一样，怎么肥事啊？——>发现代码到处都是import，所以学习模块的导入导出和es6语法——导出来的东西是什么？干嘛的？——>学习组件和vuex的知识——>组件数据哪里来的？——>学习组件通信和axios请求以及路由传参——>由请求学习生命周期，钩子函数等知识——>由此又学习了全局弹窗，全局loading方面的知识

基本上就这样来上手的vue，这个过程中，搜索网上的资料，要学会有效筛选自己需要的信息，比如了解到了组件的知识，但是网上定义组件都有几种方法，我就再观察项目的组件看属于哪种定义方式——单文件组件，毕竟是赶项目，时间要紧，后期可以慢慢再研究，方便以后使用。

下面是详细介绍整个学习过程，主要是观察代码，找出关键字搜索：

一来就碰到的问题：按照惯例，直接在chrome打开项目最外层的index.html。没反应，咋回事，突然想起来好像要启动什么才行。

网上搜索如何打开vue项目，记录下笔记：vue学习一：新建或打开vue项目。

打开页面后，在控制台看见页面节点和代码里的不一样。

      先观察了页面链接，找到对应的页面文件，再看来下其他页面文件，你会发现代码书写规律：

都有import，export default这种关键字，然后import后面的单词，在页面也有规律的在使用，这就好办了

针对这两个关键字查一波，涉猎到了AMD、CMD、Common规范， ES6模块的导入和导出，最后还有一篇让我明白我之前学ES6的方法有蠢的文章：es6常用语法（这些知识点可以去看我的vue学习笔记）

反面教材学习经验：以前按照ES6官方文档学到对象扩展那里，每句话都要读懂（自以为懂╮(╯▽╰)╭），每个代码看懂，做了大量笔记，但是机顶盒开发用不上，也就忘了。其实知道常用，好用，为什么需要用，的那些语法就行了。

　  了解模块的导入导出后，那么我要知道导出的这个东西在这个页面干嘛的？

我看被放到了components里，然后在页面又放到了节点里面，就去搜索这个关键字components，了解到了组件的知识，但是网上定义组件都有几种方法，我就再观察项目的组件看属于哪种定义方式——单文件组件。

至此，vue一大核心——组件就被我发现了，就有了vue学习之组件这篇笔记。

页面的组成现在就知道了，接下来是数据部分。

数据是怎么来的，怎么渲染到页面上的？

平时开发项目，页面呈现数据过程：请求数据，处理数据，渲染数据。跟着这个思路，一路自我提问找线索搜索。

这个得倒着找：从渲染数据的地方开始找，顺藤摸瓜找来源。

这里就涉猎到：

vue模板语法，指令（这两个都是官网先走马观花大概知道有哪些，后续用都是现用现查）

每个组件的数据容器有哪些（props，data等）

如何操作这些数据（computed，method，watch等）

这些都搞定了，然后查找数据源：

之前的组件学习让我知道了组件之间的数据传递和共享：     vue学习之vuex

但是数据肯定还有ajax请求来的，这个在页面代码里不好看出来，就直接在网上搜索的vue使用ajax请求。就涉猎到了：vue学习之生命周期和钩子函数

至此，我认为差不多搞定了使用vue展现页面的基本套路。

后续就是路由，组件缓存，事件，公共提示，全局loading处理等方面的知识，同上，都是一路观察+自我提问+合适的搜索解决的上手问题。

但是！！！！！！！！！！最后居然把我调去负责这个项目机顶盒端的开发，移动端就又这么完美错过。。。。。。。

平时的积累真的很重要，你脑袋记不住东西没关系，跟我一样可以做大量的收藏和笔记，技术到用时才不会方恨少。

千万不要让自己呆在一个舒适区，前端新技术层出不穷，改朝换代也快，不说学习，至少随时关注了解，多逛逛社区，看看别人做的东西，这样选技术方案的时候，才不至于不会盲目跟风。

做项目就跟织毛衣一样，接到需求的时候就跟拿到一团打结的毛线，先找到线头，从线头顺藤摸瓜把打结的地方都梳理开，线梳理好后，再根据你要的成品考虑选择用什么材质和粗细的针棒来织，然后考虑选择怎么个织法最便捷快速。

这些针棒和编制方式来源于你的积累：

常逛的园子：博客园，开源中国，csdn，segmentfault，w3cplus

技术问答网站：stackoverflow

找轮子，看新奇：github，codepen，runjs

没事干的时候技术升级打怪网站：freecodecamp

帮别人解决问题同时提升自己，欢迎加入这个温暖的群，群相关信息：https://www.kancloud.cn/jsfront/month/82796

资料收藏技巧：关注“前端早读课”，“前端大全”等公众号，每天早上吃个饭或者坐个地铁搭个电梯的时间就能看几篇文章了，把自己想收藏的技术文章分类收藏到有道云笔记，需要查什么的时候可以在有道云笔记搜索，想要学什么的时候可以搜出一大堆，把别人的总结起来变成自己的知识体系。