新手视角vue入门学习总结

从上周三到这周五，我用了9天入门vue，做了一个todolist，这速度着实不算快，但是对于一个编程新手来说却也是步步艰辛，不断碰到新名词然后去查阅去学习，不知不觉又把技能树点亮不少。9天以前我还只有不足三个月的编程学习经验，对于ES6并无了解且没有框架经验，只会跟着教程写一些基本组件。这几天按照公司的技术栈去一个个探索，终于写出了一个demo。
这个demo的技术栈是vue+vue-router+vuex+element-ui+axion+sass+es6，我将会以时间流水账的形式来写，看起来会很啰嗦，只是希望从小白视角去展现踩到的坑和学到的经验。

熟悉mac
首先我熟悉了mac的基本操作，因为之前在windows环境开发，所以不太适应，复制粘贴找不着，菜单栏不知道在哪里，文件系统没有盘符只能靠搜索，文件删除了无法恢复，不小心点到全屏不知如何退出。应该来说，这个熟悉操作是贯穿了始终。

阅读文档
然后我开始阅读vue文档，试图弄懂这个框架在干嘛。事实证明，如果是其他框架转vue可能阅读文档是很好的入门方式，但是对于没有框架经验的入门者不建议这么做，因为之前还处于很粗浅的阶段，对于前端工程化和一个项目的搭建并没有具体认识，脑海里无法对vue的构建思想形成映射。我的建议是采取方方老师的“copy-run-modify”大法，抄-运行-修改，先将文档里和其他方式找到的入门demo直接copy，然后去尝试着修改一些你弄不明白的地方，看看页面发生了什么改变，去阅读报错，这样会有更加直接的认识。

语法起步
我放弃了阅读vue文档，直接去技术社区找前人学习vue的总结，去了解vue基本思想“组件化””JSX语法“”单向数据流“”渐进式“，这时候我还没有具体应用过这些特性，但是没关系我们可以找教程。出于不能一次学习太多的考虑，第一个demo我并没有采用脚手架，而是从webpack官网按照起步给的路径去一个个创建，这样我们要修改的就只有app.js和page.html两个文件，非常直观，此时通过跟着文档示例和教程练习去感受每个指令和实例事件到底是怎么运作，尤其是v-model v-if v-for这些相当常用的。然后我们试着开写，搭了个最基本的架子，然后用vue语法写出来了todolist的基本功能-新增、删除、在”已完成-未完成“之间切换。
有了增删那就要有数据存储，但是这个涉及到后端，因此我去学习了localstorage的存储方式，先将数据存储到浏览器。

数据存储
数据不可能始终放在本地，我注意到公司技术栈是采用axion插件最终是要和ERP系统对接，出于学习成本的考虑，我先选择了云服务，在这里我用的是leanclound，因为他们家的文档非常完善。在文档帮助下，我完善了注册、登入、登出等功能，对判断用户权限、更新存储、加载等业务逻辑有了基本认识，基本弄明白了整个前后端交互流程。

失败尝试
此时我已经初步学习了vue语法和前后端交互流程，我开始入门vue全家桶。一开始我还是看文档，但是没有项目经验，我无法理解vue-router、vuex到底在干嘛。这时候我去找了个简历编辑器的教程，想从第一次commit看起，去试图弄明白一个项目是如何从零搭建的。实际上我选错了项目，这个项目有八九个组件，commit实在太多，最后我跟着教程也没有完成效果，但是也学到了一些东西，对于如何用一个个组件像搭积木一样搭起整个项目有了直观感受，并且学习到了vuex是如何管理数据进行操作的，并且又多明白了一些业务逻辑。

阅读源码
此刻我仍然不太明白vue全家桶是如何进行运作的，因此我去git上clone了一个非常基础的入门项目vue2-happyfri,希望通过阅读源码来学习，事实证明这种方式是行之有效的。之前我已经看文章学习了脚手架搭建项目里的每个文件都在干嘛，因此我从main.js出发去一行行了解项目的运行方式，为什么我们要import这些东西，路由是如何指定路径的跳转，实例化vue后每一行都代表了什么，然后逐渐发散开来。为了理解import，我去了解AMD、CMD等规范，这个ajax请求用的是基于promise的axion,那我又去学习promise是个什么东西，这个store文件夹里为什么会有四个文件，每一个文件里都放了些什么，通过这种发散式的学习，我碰到了不认识的代码就去查，最后终于弄懂了vue全家桶的运行方式。

正式开写
可算是到了正式开写的部分，此刻我已经对组件化的思想有所认识，我初步设计了顶栏、侧边栏、总时间、任务列表、创建任务几个组件，vuex里放的全局数据有两个：总时间和计划列表。除此之外，还写了个404页和彩蛋页面来加深自己对于路由的理解和element-ui的认识。axion不能vue.use（），我就按照前人经验把它绑定在vue的原型链上，回调函数里无法访问this那我们就用箭头函数来绑定，template标签内不能有两个同级的div或者element顶级标签，那我们就先用一个div包裹起来，data里直接写属性会警告那么可以用一个return来包裹，store里actions.js和mutation分别都在干嘛到底是一个什么样的流程，生命周期是怎么一回事钩子函数又该用哪个，export内容可以为空但是必须暴露出一个接口，甚至于一开始我不小心开启了eslint检测语法以至于根本写不下去步步报错，这些都是我踩过的坑。

关于axios
这也算是我没有完成的一部分，因为github找到的学习demo都只涉及到了”增删改查“里面的”查“，但是todolist四个都会涉及，所以不能mock数据，要么有实际可用的接口要么使用MongDB来操作数据库，但是对于学习数据库的时间成本我无法预料，因此涉及到ajax部分我只能按照文档来写出js语句但是并不能发出实际请求，幸而之前在学习使用leanclound来存储读取数据时我也算是对前后端交互有所了解，计划将之前用jquery语法和新浪接口写的新闻瀑布流加载用axios在写一次以加深理解。

下一步打算
因为深感自己对于前端工程化的理解还是太过粗浅，对于项目的实际搭建也没有什么经验，因此我周五拖了不少github上高star的vue入门项目想先学习一下，如 仿饿了么 仿知乎日报 仿网易云音乐 仿conde社区等，了解一下他们的搭建方式。之前曾经试图阅读过erp系统的源码，自以为基本弄懂了其实根本没有，希望用两三天时间来大量阅读代码来完成第一阶段准备进入下一阶段。

一句话总结学到了什么
webpack:管理依赖保持结构清晰。
vue:像搭积木一样做项目。
vue-cli：帮你直接上手，避免在配置中发疯，从入门到放弃。
vuex：管理全局数据，避免组件直接操作，index.js引入和定义，actions.js提交，mutations.js具体实现。
vue-router：定义路径和渲染区域，跳转来跳转去。
axios:基于promise，更直接的ajax请求数据。
element-ui:统一风格的封装常用插件，远离具体实现只管调用。
sass:让CSS不再繁琐，且变得有点像js。

个人向经验

• 上来不要直接阅读文档，先看看前人总结。
• 文档里的示范一定要全跑一次，然后跟着详细教程做个小项目。
• “copy-run-modify”大法是入门阶段最直观的学习方式。初步入门后可以找开源项目源码看看，有个整体认识。
• 不要试图一次性把所有技术栈都用了，一个个来，也不要以为有了教程就可以上手复杂一些的项目。
• 习惯了自己闷头学，还是太缺乏交流，有时候会被一个报错卡很久。
• 不要试图通过看文章来搭建完整的知识系统，直接上手做。然后你会不断地碰到自己不了解的知识点，这时候再去查（我连三元运算符都不知道……）。
• 多敲代码，多敲代码，多敲代码。敲代码也会有肌肉记忆。

我的codingID:madluto1994,里面有相关的三个项目： vue+leanclound的第一版todolist，照着教程敲还是失败了的简历编辑器resmuer，采用公司技术栈的todolist。