iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 2
0
自我挑戰組

從0開始vue.js的30天學習日誌系列 第 2

02 開始Vue.js的前置準備

開始前爬了一些文,大大們都說vue.js輕鬆易學,去谷哥了一下在開始vue.js之前須要會什麼東西,因目前沒有實務操縱資料的經驗,以我的學習速度真的是很怕文章難產(不想拖累團隊阿淚奔....),但如果現在不開始,那一輩子都有藉口不開始了R/images/emoticon/emoticon70.gif

然後就看到Vue作者寫的這篇-新手向:Vue 2.0 的建议学习顺序
擷取部分內容如下,想了解完整內容請去上面傳送門:

起步

  1. 紮實的JavaScript / HTML / CSS 基本功。這是前置條件。
  2. 通讀官方教程(guide)的基礎篇。不要用任何構建工具,就只用最簡單的,把教程裡的例子模仿一遍,理解用法。不推薦上來就直接用vue-cli構建項目,尤其是如果沒有Node/Webpack基礎。
  3. 照著官網上的示例,自己想一些類似的例子,模仿著實現來練手,加深理解。
  4. 閱讀官方教程進階篇的前半部分,到『自定義指令(Custom Directive) 』為止。著重理解Vue 的響應式機制和組件生命週期。『渲染函數(Render Function)』如果理解吃力可以先跳過。
  5. 閱讀教程里關於路由和狀態管理的章節,然後根據需要學習vue-router 和vuex。同樣的,先不要管構建工具,以跟著文檔裡的例子理解用法為主。
  6. 走完基礎文檔後,如果你對於基於Node 的前端工程化不熟悉,就需要補課了。下面這些嚴格來說並不是Vue 本身的內容,也不涵蓋所有的前端工程化知識,但對於大型的Vue 工程是前置條件,也是合格的『前端工程師』應當具備的知識。

看到第一項玻璃心都碎滿地惹 淚奔

好....看完這部分,我覺得我還是明年再來好了(喂,喔喔.....不是.....是一邊學習Vue一邊補足js基本觀念,雖然上面有些詞看不太懂例如前端工程化,然後看到後面Webpack就很害怕,但我不想半途而廢阿...QQ,那麼就從官方文件的安裝開始吧!(附上連結 官方文件安装 — Vue.js)

vue開發環境

下載後以script引入就可以了,這邊使用CDN引入:

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

另外官方提供兩個版本:
Imgur

各點開了開發版本生產版本出來看,發現前者(開發)是vue.js後者(生產)是vue.min.js,文件上也提醒開發結束要上線的時候,要記得把開發時引用的vue.js替換為vue.min.js

如果是引入開發版本,專案開啟時在chrome-devtools會看到這樣:

Imgur

  • 如果沒有裝Vue Devtools擴充套件的話,就會出現第一則建議安裝的訊息,Vue Devtools是Vue提供的debug套件,之後用上會在後面文章做一些整理。
  • 接著會有提示目前是開發者模式的訊息,也如同官方文件敘述,再次提醒開發者在部屬到正式環境時,確保引用的版本是生產版本

為了印證官方文件說的壓縮版本會失去所有常見錯誤相關的警告,來亂測試看看:

<!-- html -->
<div id="app01" class="section">
    <input type="text" v-model="value">
    <br>
    {{value}}
</div>

<!-- js -->
<script>
new Vue({
      el: "#app01",
      // data: {
      //   value: "text",
      // },
      });
</script>

這邊把data註解掉之後,console如下:

生產版本:value is not defined
Imgur

開發版本:value is not defined @#$~@%!~^$#~$@^%~@$^%!
Imgur

對照下來開發版本的錯誤訊息明顯描述的比較詳細,至於還有其他沒瞭解到的細節或是錯誤的地方,懇請路過大大提點了,非常感謝/images/emoticon/emoticon33.gif


上一篇
01 給自己一個學習的動力 ( 前言 )
下一篇
03 創建Vue應用程式
系列文
從0開始vue.js的30天學習日誌30

尚未有邦友留言

立即登入留言