跳至主要内容

Vue Cli Introduce

信息

原始 MD by 塏閎

今晚，我想來點快速建置專案與生命週期 by Kai-Hong Chen

任何語言都會有一個生命週期，而我們的 Vue.js 也不例外，但因為 2.0 跟 3.0 的部分有些微差異，但大致上做的事情都是一樣的~​

大致上分成以下部分

稍微敘述一下他們在幹嘛的，畢竟直接看一定看不懂​

beforeCreate​

單純只有建立起 Vue 本體，甚麼事情都還沒辦法做

created​

本體已經建好，基本的方法都可以使用(computed,data 等)

beforeMount​

還沒有把 Vue 本體掛載到 DOM 節點上，沒掛上去的話就算 Vue 本身有建立好也無法運作

mounted​

這時已經掛載好，有點像是 jQuery 的$(document).ready()這個 function 之後做的事

beforeUpdate​

在資料更新時，畫面也更新前要做的事情

updated​

這時就是整個都更新完(包括畫面)後要做的事情

beforeUnmount​

顧名思義，就是 Vue 本體被銷毀前要做的事情

unmounted​

被銷毀後要做什麼事情

至於剛剛提到的那些東西，目前我比較少用到​

接下來講一點 Vue 專案的建置步驟，畢竟應該沒有人想要從頭到尾自己開一個出來，那很累​

這個簡便的步驟本身叫做 Vue CLI，這裡面有包含一些基本的東西，像是 TypeScript、Babel、ESLint 等等​

之後要再新增一些插件也是可以的喔，並不是說一開始沒裝之後就不能裝了，而且另外兩巨頭(React、Angular)也是有這個類似的快速建置專案的工具​

但在開始之前，我們需要 nodejs 本身，因為 CLI 本身是 javascript，需要 js 的環境，來確認一下自己本地到底有沒有吧~​

$ node -v

之後再安裝 Vue CLI 本身​

$ yarn global add @vue/cli

安裝完後再稍微確認一下有沒有運作正常​

接下來就可以開始創建了喔~​

創建的方法​

$ vue create test

接下來選擇你的 Vue 版本​

通常會建議選擇 Manually 那一個，因為它可以選擇的東西比較多，另外兩個都只會裝它旁邊寫到的東西而已​

選擇這些東西，選擇是透過 space 鍵喔，不要按到 Enter 鍵​

假如你沒選到 choose version 的話預設會以 2.0 為主​

就會直接進入到下個選擇階段​

假如你要選擇 3.0 的版本的話，就一定要勾選 choose version 那個選項喔，在這邊我們選擇 2.0 喔​

這邊的 history mode 就是不會有醜醜的#，所以不想要#的話就直接 Enter 吧~​

這就是醜醜的#​

再來選擇你的規則，就是整個專案都要按照這個規則走，不符合他的期望它就會噴好噴滿​

恩，很紅​

這邊是選擇規則檢查的時機​

一個是存檔時檢查，一個是 commit 時檢查​

把這些規則的設定檔放在哪裡，一般都會放在 package.json 裡面​

他問要不要儲存這些設定檔方便以後偷懶使用，但會建議每次選都重選一次，畢竟每次都不一定會是一模一樣的設定阿 XD​

我們終於快結束了​

跟著他的步驟走吧~​

一定要記得先進入檔案後才能使用 yarn 喔，不然系統本身也不會知道你到底要幹嘛​

run 好之後就會顯示你可以透過哪些方法連到它​

終於建置好你自己的專案了~ 一開始建置好的都會長成這副德行，之後她要長成怎樣就要看各位的努力了喔​

fin~