Vue.js CLI 環境建立，認識架構與生命週期

Chingya

Published in

✨ 黑洞創造 BlackHole Creative ✨

8 min readApr 7, 2022

🚀 簡單開啟 Vue 的學習旅途 Part 01

什麼是 Vue CLI？

Vue CLI 是由 Vue.js 的核心團隊所開發，它是一個提供開發者可以快速建置 Vue.js 專案的工具，並基於 webpack，提供了許多相關的功能、套件安裝協助。

安裝 Vue CLI

安裝 Vue CLI 前，必須先安裝 Node.js（如果沒有，可以到 Node.js 官網下載安裝），Vue CLI 官方說明需要搭配 Node.js 8.9 以上的版本才能使用，可以在終端機輸入node -v來檢查版本。

若是已經安裝完 Node.js，就能正式來安裝 Vue CLI 了！

首先，開啟終端機，並輸入：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

接下來可以看到一連串的安裝過程，等跑完之後，可以在終端機輸入vue -V來確認是否安裝成功。

建立 Vue 專案

完成以上的安裝之後，就可以來快速建立 Vue 專案，一樣打開終端機，輸入以下指令：

vue create [專案名稱]

接著會詢問要建立 Vue 2 / Vue 3 或者自行手動選擇版本與相關套件設定的專案：

默認設定 Default
可以快速建立一個基本原型，可依照需求使用 Vue 2 或 Vue 3
手動設定 Manually
較常被使用在實際製作專案時，可自由選擇使用的內容設定

當選擇完畢後，可以看到成功建立專案的畫面：

這時候我們就能夠輸入以下指令來啟動專案：

cd [專案名稱]
npm run serve

接著可以看到這樣的畫面：

打開瀏覽器並開啟指定的連結 http://localhost:8080/，就可以看到專案已經被建立好了！

認識 Vue 架構

當建立好一個 Vue 專案的時候，可以看到專案的目錄如下：

├── node_modules/       # 使用 npm 下載管理的模組會集中在此
├── public/             # 此處的檔案可使用絕對路徑取得，不會經過編譯壓縮處理
│   ├── favicon.ico     # 範例用的圖片檔
│   └── index.html      # 網站入口
├── src/                # 前端開發的原始檔案，基本上要寫的程式都是放在此處
│   ├── assets/         # 此處的檔案可使用相對路徑取得，會經過編譯壓縮處理
│   ├── components/     # Vue 元件檔案
│   ├── App.vue         # Vue 專案的進入點
│   ├── main.js         # Vue 專案的設定檔
├── .gitignore          # git 設定檔案
├── babel.config.js     # babel 配置
├── jsconfig.json       
├── package-lock.json   
├── package.json        # npm 產生的專案文件
└── vue.config.js       # Vue 設定文件

其中，可以看到在專案裡面會有 .vue 副檔名的檔案，開啟 src/App.vue 觀察架構，相信對於寫過 HTML 的人來說不陌生，它主要分成三個區塊：

templete 區塊
元件的 HTML 模板，撰寫的 HTML 內容會被放在這邊，但需要特別注意的是，模板中只能包含一個父節點（也就是頂層 div 只能有一個），在這邊可以使用 Vue.js 所提供的各種指令和語法，如：{{ }}、v-if、v-show等等。
script 區塊
元件的 JavaScript / TypeScript 程式，通常使用ES6寫法，透過 export default 輸出。包含 Vue.js 中的 data 、props 、 methods 以及生命週期的 Hook 函式（會在下一大段說明生命週期），也可以引入其他的元件來使用。
style 區塊
元件的 CSS 樣式，如同平常寫網頁的 <style> 功能一樣，若是在標籤上加上 scoped 可以限制只能在這個元件中使用，可避免元件之間因重複制定樣式而相互影響（若無設定則是全域使用）。

Vue.js 透過這三個區塊來表示單一元件，這樣的檔案也被稱為單一元件檔 (SFC, Single File Component)。

SFC 單一元件檔

SFC 顧名思義就是一個檔案只能用來代表一個元件，可以理解為 Vue.js 將呈現出來的網頁，拆分成不同的元件組合而成，而每一個元件都是獨立的 .vue 檔案，且包含各自的 HTML、script、css 程式。這樣的寫法可以讓我們在組織程式碼結構的時候，很清楚地看出整個專案的架構與元件的分割關係，進而達到更高的可讀性及可重用性。

以下是一個 vue 檔案的範例寫法：

<template>
    <div>
        <!--HTML內容 -->
    </div>
</template>

<script>
    // JavaScript內容
</script>

<style>
    /*CSS內容 */
</style>

總結一下使用元件的好處：

可讀性高，方便重複使用
當執行較大專案時，更容易管理與維護
可限縮在元件區域使用，減少全域造成的相互影響

Vue 元件的生命週期

接著我們來認識一下元件的生命週期，先看一下 Vue 官網的說明圖：

https://vuejs.org/guide/essentials/lifecycle.html — ▲ Lifecycle Diagram

簡單來說，每個 Vue 的實體都是一個元件，讓元件呈現在網站上會執行一連串的工作，從開始「創建」、「DOM 元素掛載」、「資料的渲染與更新」和「銷毀移除」等過程，我們統稱它為生命週期。

生命週期四階段

第一階段 Creation 初始建置
第二階段 Mounting 資料掛載
第三階段 Updating 資料改變，重新渲染畫面
第四階段 Destruction 元件銷毀

而 Vue.js 提供開發者能夠在相對應的階段處理的 function，我們將這些 function 稱為生命週期的 Hook 函式。以下是範例寫法：

<script>
export default {
  data() {
    return {
      message: 'Welcome to Vue!'
    };
  },
  methods: {
    doSomething() {
      alert('Hello!');
    }
  },
  beforeCreate(){
    console.log('beforeCreate called')
  },
  created() {
    console.log('created called')
  },
  beforeMount() {
    console.log('beforeMount called')
  },
  mounted() {
    console.log('mounted called')
  },
  beforeUpdate() {
    console.log('beforeUpdate called')
  },
  updated() {
    console.log('update called')
  }
};
</script>

常用的情境

beforeCreate：可加入 loading 事件
created：結束 loading，可發出API請求，可讀取到建立的屬性（data、methods等）
mounted：初始化結束，API資料讀取完成，DOM渲染成正確的資料
beforeDestroy：確認是否刪除元件
destroyed：當元件刪除後清空相關內容

每個 Hook 函式運作的時機都不大相同，所以可以多嘗試使用，了解在每個階段能執行的操作相當的重要，當發生奇妙 bug 的時候，可以先看看 Hook 函式中的程式執行了該階段不能執行的內容！~

參考：

https://book.vue.tw/CH3/3-1-vue-cli-introduction.html
https://ithelp.ithome.com.tw/articles/10236523
https://book.vue.tw/CH3/3-2-vue-sfc.html
https://medium.com/pierceshih/vue-js-%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98-day14-vue%E7%94%9F%E5%91%BD%E9%80%B1%E6%9C%9F-65bc934dfd47
https://ithelp.ithome.com.tw/articles/10242041