[Vue Note] — Vue-Cli #1 初次見面

發表於 更新於 分類於 ， ， 文章字數： 2.4k 所需閱讀時間 ≈ 2 分鐘

Introduction & 前言

再三個月前剛接觸 Code 的時候，到現在一直都是用純 html css JavaScript 在切，期間不免常常聽到大家嘴裡常說前端框架、前端框架…好奇心驅使下前陣子看了一下，放棄… (因為 JS 還太菜
雖然現在還是很菜，但是早晚都會碰到的東西，就把它記錄下來當成自己練習的記憶。

為什麼要學習 Vue ?

其實框架在前端、後端及數據庫都有所謂的框架，而前端常用的框架從 JQuery、Extjs、Bootstrap… 等等，一直到 Vue、React、AngularJS… 這些框架都封裝了一些功能，讓使用者可以再更少的程式碼下做更多的事情，而且框架如同名字所定義 Frame(架構)，它有一定的規範，所以讓你更容易有目標更好上手，不至於像無頭蒼蠅。框架也有輕重之分，像是輕量的 JQuery，或是重量的Extjs， 差別也很簡單，重量越重功能越多。而 Vue,js 就是基於 JavaScript 之上產生出來的。

撇除原生 JS 的前端框架三巨頭 — 看排名請至 https://blog.csdn.net/superdangbo/article/details/78883019

Summary & 摘要

在選擇上我優先選擇了 Vue 有幾點原因，在此先說明每一個框架都有自己的優缺點，並不是這個特別突出，或是那個特別爛，而去做選擇，應該選擇自己所適合並且你剛好需要的框架才是。

  1. 在前端框架中普遍人認為較好上手的就是 Vue

  2. Laravel 也在 PHP Framework 5 之後把 Vue 納入其中，所以具有 Vue 知識的開發人員對使用 Laravel 開發應用的後端團隊有所補充。

  3. Vue 的資料雙向綁定，善於資料上的處理。

  4. Vue-cli 3.x 開始提供了 UI ( 對不太會下指令的人真的是一大福音

說了這麼多，小總結一下還是必須挑自己需要並且願意花時間成本在上面的框架去學習，因為每學一個都是一個時間的付出，在資訊爆炸的時代，更新速度又這麼快，「不管任何東西都沒有所謂最好，只有所謂最適合」。

然而在使用 Vue 之前還是先建議一下必須有基本的 HTML CSS JavaScript 知識(雖然自己也沒有敢說很熟…掩面

在開始前先解釋一下什麼是 Vue-Cli ，它是作者開發的 vue 懶人開發包，裡面包含有 5 種結構，從最基礎的 simple 到 browserify 以及 webpack 版本皆可以自由選擇，詳細不多說，可以點我看文章。

廢話說多了，下面立馬進入正題。

*Node Package Manager*

事前作業

  1. Node.js

  2. NPM

  3. Vue 這次的 Vue-cli 3x 版本需要最低 Node.js 8.9 版本或更高 (推荐 8.11.0+)，在安裝 Node.js 時候會一併安裝 NPM 這個東西，先簡單解釋一下這是什麼。

    全名為 Node Package Manager，是 Node.js 的套件（package）管理工具。

因為文章主要是在 Vue-cli 部分，所以安裝 Node.js 及 NPM 的部分會略過，關於 Node.js 的安裝可以點我，另一種安裝 Node.js 及 NPM 的部分可以點我。

重頭戲來了

安裝好 Node.js 及 NPM 後打開你的終端機，輸入其中一個指令開始全域安裝：

1
2
3
$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli

人生曲折

如果出現錯誤基本上都能谷歌爬文，這邊剛好出現一個錯誤。

1
"Error: EACCES: permission denied, access'/usr/local/lib/node_modules'"

因為剛好踫上這個問題爬了下文，在前方加上 sudo 後，輸入使用者密碼就好，因為管理者權限的問題，另外切記不能在資料夾內用編譯器開啟終端機安裝，菜雞就幹了這種蠢事，記得另外開一個終端機來安裝。

關於error:-13

安裝結束後可以再輸入下面的指令檢查你的版本：

1
$ vue --version 或 -V

安裝完成

菜雞們的福音

如果對指令不熟的同伴們有福了，在 Vue-cli 3x 版本開始後提供了 UI 介面，這也是我立馬試著學習的很大一個原因之一啊，不需要再去特別背什麼指令，你能邊操作，邊學習指令。

輸入 **Vue ui** 就是這麼簡單

1
$ vue ui

接下來原諒我一系列的圖文教學，我覺得圖片比打字更有效理解(誤

輸入上面的指令後就會自動帶你到他的網頁去

點選創建後在你要的地方創建專案

這邊都先選預設

第一次摸索可以選擇預設

這邊如果你對 Vue 有一定熟悉之後，建議可以選擇手動，選擇自己想要的插件功能，比如 bebel、vuex、vue-router…等等。

你即將建出第一個專案囉

所有功能一目瞭然

建好了之後我們點選任務，然後選擇第一個 Serve 並運行它，就可以把專案跑起來了。

好興奮呀

所有指令都在這

點進輸出裡，你就能知道在你按下滑鼠按鍵的時候， Vue 都幫你幹了什麼事，說到這兒，大家應該都把第一個專案建起來了吧，點進上面那兩串網址其中一個。

App running at:

— Local: http://localhost:8083/

— Network: http://192.168.1.110:8083/

你的第一個專案出爐囉

Conclusion & 結論

其實這算是我第一次 Build 出一個專案，最開始在寫 html 的時候常常因為同一個 header 跟 layout 不同的內容卻要弄出好幾個差不多的檔案，就在思考，該怎麼樣才能有效的分離他們，並且減少程式碼。

剛好最近在 Udemy 的 六角學院 — 勇者地下城 挑戰中發現好多人在使用 Vue，讓我又開始想嘗試著挑戰看看，才開始碰我的第一個 Vue 專案，所以如果內容有什麼錯誤的話，要麻煩各路高手大大包容，並且不吝嗇指教了。

這次寫部落格紀錄，主要是希望養成自己的習慣，並且希望幾年後再回頭看看自己，能一樣保持著寫程式的熱衷還有那份初衷。

關於 Vue 的更多學習歷程，會再繼續新增文章上去，希望就算只有 0.1 能幫助到那個在疑惑的你，或是迷茫需要解答的自己，這篇文章就值得了，我們下次見。

參考網站