如何在5天内学会Vue？聊聊个人学习方法！

时间 2020-04-25

标签如何 5天学会 vue 聊聊个人学习方法繁體版

原文原文链接

SpringBoot实战电商项目mall（30k+star）地址：github.com/macrozheng/…css

摘要

先说下为何用学习Vue这个例子来谈个人学习方法？其实关注个人朋友不少都是从个人Github上面来的，大多数都是Java后端开发者，Vue做为一种前端技术，掌握的人并很少。因此使用Vue从零开始的学习过程为例子，对于你们学习新技术有很好的借鉴价值，接下来咱们来聊聊个人学习方法吧！前端

明确目标

咱们在学习某项新技术的时候，必定是有目标的，有目标的学习才不是瞎忙。好比说我学习Vue的目标是啥，其实就是作个后台管理系统的前端界面，就是长下面这样的！vue

作前端有不少技术，最流行的无外乎这三个：Vue、React、Angular，可是我为何选择了Vue呢？起初的时候这三种都研究了下，首先研究的是React，可是看了一下语法，感受和本身之前的习惯不太符合（之前学过一点JavaScript）就没选它，Angular却是研究了一整子，用了一段时间TypeScript仍是不太习惯，最终仍是选择了Vue。ios

选择Vue的缘由主要有这三个：git

首先Vue在Github上面Star最多，既然它能排第一，总有它的优势；
其次是它所提倡的渐进式学习，从JavaScript过分到Vue是很平滑的，没有陡峭的学习曲线；
还有就是它的中文文档很是完善，有利于咱们的学习。

基础学习

选定了咱们须要学习的技术之后，接下来就是学习Vue的基础了。强烈建议看一遍官方教程，我学习新技术的时候，通常官方文档有中文的我都会看一遍。github

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

刚开始学习的时候只看教程这块便可：正则表达式

说说我看文档时的一些思考吧，核心是以理解为主，难以理解的内容能够暂时跳过。不须要去死磕一些难以理解的部分，有可能你当时死磕的东西之后根本用不上。快速把文档看一遍，扩充你对这门新技术的认知才是最重要的。你对新技术认知越足，你就越能更好地去运用它。vue-router

项目导向

当你对Vue有必定的了解以后，你就能够去找一个和你的目标最接近的开源项目，借鉴开源项目中所使用的技术栈，快速完成你的目标。vuex

怎么找到这个项目呢？直接去Github上面找就能够了，直接搜索关键字Vue，按Star数最多排行！

因而咱们就找到了vue-element-admin这个开源项目：github.com/PanJiaChen/…

通常这种前端项目都会有在线预览的地址，咱们先看下：panjiachen.github.io/vue-element…

这个项目和咱们的目标很符合，不过看着太复杂了，咱们刚刚学完Vue的基础，学它就和劝退差很少了。算了咱们仍是先去它的官方文档上面看看：panjiachen.gitee.io/vue-element…

咱们能够发现原来还有一个叫vue-admin-template的基础模板项目：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"
  }
}
复制代码