如何在5天内学会Vue?聊聊我的学习方法!


SpringBoot实战电商项目mall(30k+star)地址:github.com/macrozheng/…

摘要

先说下为什么用学习Vue这个比如来谈我的学习方法?其实关注我P D (的朋友许多都是从我的Github上面来的,大多数8 R g p :都是Jav} :a后端开发者,Vue作为一种前端技能,把握的人并不多。所以使用Vue从零开端的学习进程为比如,关于咱们学习新技能有很好的学$ j t # $ d c W g习价值,接下来咱们来聊聊我的学习方法吧!

清晰方针

咱们在学习某项新技能的时分,一定是有方针的,有方针的学习才不是瞎忙。比如说我学习Vue的方针是啥,其实便是做个后台办理体系的前端界面,便是长下面这样的!

如何在5天内学会Vue?聊聊我的学习方法!

做前端有许多技能,最_ K I G 1 ! [ P流行o @ k y 7 R的无外乎这三个:] _ : R K 5 `Vue、React、^ { 1 D n tAn{ H e e (gular,可是我为什么挑选了Vuef e u : : p ( &呢?起先的时分这三种都研讨了下,首要研讨的是? F s A ! ` ; l @React,可是看了一下语法,感觉) *和自己曾经的习惯不* s u % Z @ G / /太符合(曾经学过一点Jad Z J 8 E S g S ]vaScript)就没选它,Angular却是研讨了一整子,用了一段时刻Typq n 7 – FeScript仍是不太习惯,终究仍是挑选了Vue。

挑选Vue的原因主要有这三个:

  • 首要Vue在Github上面Star最多,既然它z n I 1 n能排榜首,总有它的优点;
  • 其次是它所发起的渐进式学习,从JavaScript过度到Vue是很平滑的,没有陡峭的学习曲线;
  • 还有便是它的中文文档非常完善,有利于咱们的学习。

根底学习

选定了咱们需要学习的技能今后,接下来便是学习Vue的根底了。强烈建议看一遍官方教程,我学习新技能的时分,一般官方文档有中文$ d ) X L } = .的我都会看一遍[ U = ` o l V

官方文档地址:cn.vuejs.org/v2/guide/

刚开端学习的时分只看教程这块即可:

如何在5天内学会Vue?聊聊我的学习方法!

说说我看文档时的一些思考吧,中心是以了解为主,难以了解的内容能够暂时越v S U过。不需要去死磕一些难以了解的部分,有或许你当时死磕的东西今后根本用不上。快速把S | d文档看一遍,扩大你对这门新技能的认知才是最重要的。你. 7 V I对新技能认知越足,你就越@ @ t 能更好地去运用它。

项目w + 3 ] x 2 )导向

当你对Vue有一定的了解之后,你就能够去找一个和你U { O e & [ X ;的方针最J m : # D f y接近的开源项目,学习开源r $ 1 & k 5 p ? c项目中所使用的技Y b ? Y t `能栈,快速完成你的方针。# i 5 W _ Y _ I

怎么找到这个项目呢?直接去GithubD r m = P ! h上面找就能够了,直接搜索关键字Vue,按Star数最@ } 8 ? 1 E X @ -排行!

如何在5天内学会Vue?聊聊我的学习方法!

于是咱们就找到了vue-element-admin这个开源项目:github.com/PanJiaChen/…

一般这种前端项目都会有在线预览的地址,咱们先看下:panjiachen.github.io/vue-element…

如何在5天内学会Vue?聊聊我的学习方法!

这个项目和咱们的方针很符合f F | _ p,不过看着太杂乱了,咱们刚刚学完Vue的根底,学它就和劝退差不多了。算了咱们仍是先去它的官方文档U k ?上面看看:panjiachen.giq d G ( Q 7tee.io/vue-element…

如何在5天内学会Vue?聊聊我的学习方法!

咱们能够发现原来还有一个叫vue-admin-tW 1 O p eemplate的根底模板项目:github.com/PanJiaChen/…

看了一n z d w t + h下它的预览页面,发现这个比上面的简单多了,就决定是它了。

如何在5天内学会Vue?聊聊我的学习方法!

扩大知u Q L识面

找到方针项目今后,咱们就要开端学习它了。学习开源项目,咱们暂时不必去看它的源码,先去学习它的技能栈。对u n w M它所用技能都有所了解今后,学它就轻松了!

一般情况下,开源项目用到的技能都会在README中阐明,但这个项目刚好没有。关于VN @ i R $ gue项目只需看P V # , 7 8 2 w下它的package.json文件咱们就能大约了解它的技能栈了。

 {
"dependencies": {
"axios": "0.18.1",
"element-ui": "2.13.0"_ ~ Y . Y = n n,
"js-cookie": "b F c b v J2.2.0",
"normalize.css": "7.0.L : X p  _ [ E0",
"nprogress": "0.2.0",
"path-to-regexp": "2.4.0",
"vue9 @  ! # D G": "2.6.10",
"vue-router": "3.0.6",
"vuex": "3.1.0"
}
}

接下w { y = v来咱们要做的便是学习技能栈里边一切的技能,仍是了解为主,扩大自己的知识面。

axios

一款根据JavaScript的http恳求客户端,用于在浏览器j 9 $ )中发起恳求,这个只需看下项目的README就大约知道怎么用了。

gito y r ) 8 } )hub.com/axios/axios

element-ui

一套为开发者、设计师和产品司理准备的根据 Vue 2.0 的桌面端组件库。说白了便是个UI组件库,看下官方文档即可。

element.eleme.cn/

js-cookie

一款操作Cookie的Ja| – x M ovaScript组件库,这个只需看下项目的READM– . * QE就大约知道怎么用了。

github.com/js-cU H qookie{ ! Z S )/j…

normalize.css

一款css库,在默认的HTML元素样式上提供了& B m : Y跨浏览器的高度一致性,说白了便是浏览器样式兼% u H =容用的,不看也能够。

github.com/necolat * 6 n 3 } w – s/nor…

nprogress

一款根据JavaScript的进度条UI组件,这个只需看下项目: i Q x 5 t的README就大约知道怎么用了。

github.com/rstact p H f * s Xruz/np…

path-to-regexp

将途径字符串(如/user/:name)转换为正则表达式的工具库,这个只需看下项目的README就大约知道怎么用了。

github.com/pillarjs/pa…

vue

咱们之前就学过VuT | , Pe的根底了,看下官方教程即可。

cn.vuejs.org/v2/g, W | @ A !uide/

vue-router

Vue Router 是 Vue.js 官方的路由办理器。它和 Vue.js 的中心深度集成,让构建单页面使用变得易如反掌。看下官方教程即可。c e z @ e e 4

router.vuejs.org/zh/

vuex

Vuex 是一个专为 Vue.js 使用程序开发的状况办理模式。其实便是个全局状况办理器,比如用户登录信息,你许多页面都会用到,就存到这个3 M = g t ~里边。看下官方文档即可。

vuex.vuejs.org/zh/

vue-admin-template

学完了上面这些框架,接下来咱们就能够l . _ E / T 4开端学习咱们的方针项目了,在中文的README里边有配套的教程文章,看一遍即可。

github.com/PanJiaChen/…

如何在5天内学会Vue?聊聊我的学习方法!

学习! | m m了方针项目的整套技能栈,同时看过了它的配套教程文章,看懂源码应该不是难事了,接下来便是看一遍该项目源码了。

实践

咱们能够这样k B E , #分配时刻,1天看Vue的官方文y { g p : $ V {档,2天把vue-admin-template所使用的技能栈都学习一遍,再花2天学习vue-admin-template的源码,这样5天就能学会~ { 8 * 9Vue了| w f j ( !

根本学会了Vue今后,要能牢牢把握就要进行实践,否则过几天这些所学的东西就会离你而去了。

如何进行实践7 ( a @ W呢?回到咱们学习7 , P方针:做个后台办理体系的前端界面,这是一个很好的实践。我当时便是经过做我的mall$ g t 4 8 Y W-admin-web项目z 2 F来实践的。

我的mall项目有着完善的后台办理API,咱们只需对照我的前端项目自行完成一些功用便是一次很好的实践,就能把握Vue了。

这里我引@ , d H荐咱们t x { U z自行完成下我的商品和订$ ` 6 g $ A单模块,这两个模块最杂乱,只需能完成这两个模V ] q块,其他的就都能完成了,使用Vue开发一整套后台办理体系也不在话下了。

如何在5天内学会Vue?聊聊我的学习方法!

总结

最后总结一下我的学习方法S i V , 7 F o d,首要要清晰自己的学习方F y 0 v z 1 a针,然后针对方针去学习相关技能的根底,然后能够找个相关的开源项目学习下,学习其间的技能栈,之后进行实. K `践,这样就能很好地把握这门技能了。

项目地址

gitz W #hub.com/macrozhenZ 1 t F ag/…

大众号

mall项目全套学习教程连载中,关注大众号榜首时刻获取。

如何在5天内学会Vue?聊聊我的学习方法!

发表评论

提供最优质的资源集合

立即查看 了解详情