如何在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"
  }
}
複製代碼