SpringBoot实战电商项目商城（30k+star）地址：https://github.com/macrozheng/mall总结先说说为什么用学习Vue的例子来说说我的学习方法？其实很多关注我的朋友都来自我的Github，而且大部分都是Java后端开发人员。Vue作为一项前端技术，掌握它的人并不多。所以以Vue从零开始的学习过程为例，对大家学习新技术有很大的参考价值。接下来说说我的学习方法吧！明确目标我们在学习一门新技术的时候，一定要有一个目标，有目标的学习并不急于求成。比如我学习Vue的目标是什么？其实就是做一个后台管理系统的前端界面，长这个样子！前端技术有很多，最流行的就是这三个：Vue、React、Angular，但我为什么选择了Vue？一开始，我研究了他们三个。最开始学的是React，但是看了语法之后觉得不符合我以前的习惯（之前学过一点JavaScript），所以没有选择。Angular做了很多研究。儿子，用了一段时间TypeScript，还是不习惯，所以最后选择了Vue。选择Vue主要有3个原因：第一，Vue在Github上的star最多。既然能排第一，总有它的优势；第二，提倡循序渐进的学习，从JavaScript到Vue的过渡非常顺利，没有陡峭的学习曲线；另外它的中文文档非常齐全，有利于我们的学习。基础学习选择好我们需要学习的技术之后，接下来就是学习Vue的基础知识了。强烈建议阅读官方教程。我在学习新技术的时候，一般都是看中文的官方文档。官方文档地址：https://cn.vuejs.org/v2/guide/刚开始学习的时候，只是看了教程：说说看文档的一些感想。核心是理解，很难理解的可以暂时跳过。一些看不懂的地方就不用吐槽了。有可能你当时猛砸的东西，以后可能根本就用不上了。快速浏览文档并扩展您对这项新技术的了解是最重要的。你对一项新技术了解得越多，你就越能使用它。面向项目当你对Vue有了一定的了解后，就可以找到一个最接近你目标的开源项目，学习开源项目中使用的技术栈，快速完成你的目标。你是怎么找到这个项目的？直接去Github上找就可以了，直接搜索关键词Vue，按照Star数最多排名！于是我们找到了vue-element-admin这个开源项目：https://github.com/PanJiaChen...一般这种前端项目都会有在线预览地址，我们先看看：https:///panjiachen.github.io/...这个项目符合我们的目标，但是看起来太复杂了。我们刚刚学习了Vue的基础知识，学习它几乎等同于劝我们退出。算了，先去它的官方文档看看吧：https://panjiachen.gitee.io/v...我们可以发现有一个基础的模板项目叫vue-admin-template：https://github.com/PanJiaChen...看了一下它的预览页面，发现这个比上面那个简单多了，于是决定用它。扩展知识，找到目标项目后，我们就开始学习吧。学习开源项目，我们暂时不用看它的源码，而是先学习它的技术栈。一旦了解了它使用的技术，学习它就很容易了！一般情况下，开源项目中使用的技术都会在README中进行说明，而本项目恰恰没有。对于Vue项目，只要看一下它的package.json文件，我们就可以大致了解它的技术栈。{“dependencies”：{“axios”：“0.18.1”，“element-ui”：“2.13.0”，“js-cookie”：“2.2.0”，“normalize.css”：“7.0.0","nprogress":"0.2.0","path-to-regexp":"2.4.0","vue":"2.6.10","vue-router":"3.0.6","vuex":"3.1.0"}}接下来我们要做的就是学习技术栈中的所有技术，或者说理解和扩展我们的知识。Axios是一个基于JavaScript的http请求客户端，用于在浏览器中发起请求。只需查看项目的README即可知道如何使用它。https://github.com/axios/axioselement-ui一个面向开发人员、设计师和产品经理的基于Vue2.0的桌面组件库。说白了就是一个UI组件库，看官方文档就知道了。https://element.eleme.cn/js-cookie是一个用于操作cookies的JavaScript组件库。只需查看项目的README即可知道如何使用它。https://github.com/js-cookie/...normalize.css是一个在默认HTML元素样式中提供高度跨浏览器一致性的css库。说白了就是兼容浏览器样式。你不必看它。https://github.com/necolas/no...nprogress是一个基于JavaScript的进度条UI组件。只需查看项目的README即可知道如何使用它。https://github.com/rstacruz/n...path-to-regexp是一个将路径字符串（如/user/:name）转换为正则表达式的工具库。只需查看项目的自述文件即可了解如何使用它。https://github.com/pillarjs/p...vue我们之前学习过Vue的基础知识，看官方教程就可以了。https://cn.vuejs.org/v2/guide/vue-routerVueRouter是Vue.js官方的路由管理器。它与Vue.js的核心深度集成，可以轻松构建单页应用程序。看官方教程就好了。https://router.vuejs.org/zh/vuexVuex是专门为Vue.js应用开发的状态管理模式。其实就是一个全局的状态管理器，比如用户登录信息，很多页面你都会用到，就存放在这个里面。看看官方文档就知道了。https://vuex.vuejs.org/zh/vue-admin-template学习完上面的框架，我们就可以开始学习我们的目标项目了。中文README里面有配套的教程文章，看一遍就可以了。能。https://github.com/PanJiaChen...在学习了目标项目的整个技术栈并阅读其配套教程文章后，理解源码应该不难。下一步是阅读项目的源代码。在实践中，我们可以这样分配时间，1天阅读Vue官方文档，2天学习vue-admin-template使用的所有技术栈，再花2天时间学习vue-admin-模板，这样5天就可以学会Vue。基本学完Vue，能牢牢掌握的一定要多加练习，不然学的东西没几天就离你而去了。如何练习？回到我们的学习目标：做后台管理系统的前端接口是一个很好的实践。我通过做我的mall-admin-web项目来练习它。我的商城项目有完善的后台管理API。大家根据我的前端项目自己实现一些功能是一个很好的实践，大家可以掌握Vue。这里推荐大家自己实现我的产品和订单模块。这两个模块是最复杂的。只要能实现这两个模块，其他的都可以实现。使用Vue开发一个完整的后台管理系统是没有问题的。总结最后总结一下我的学习方法。首先我要明确自己的学习目标，然后根据目标学习相关技术的基础知识。然后我就可以找一个相关的开源项目来学习，学习技术栈，然后去实践。能很好地掌握这项技术。项目地址https://github.com/macrozheng/mall-admin-web公众号mall项目全套学习教程正在连载中，第一时间关注公众号。
