EP1 - 快速入門 Vue.js

學一套語言，以前都是Google & Stack Overflow 然後就實作起來了～
現在2024 AI工具滿天飛，大家邊學習邊問AI老師就好摟！
八成應該沒問題吧？？？

Vue線上編輯器

還沒安裝先來線上體驗一下 ⮕ PlayGround
純HTML設置(不用建置) ⮕ JSFiddle
瀏覽器上體驗建置過程 ⮕ StackBlitz

快速入門

每次學習之前的那堵高牆就是環境建置，
好幾次建置完後就開始擺爛沒有心情去玩有趣的東西～
希望這次能持續以恆，反正不懂就問AI吧～

先決條件：
1. 熟悉CLI (Command Line)
2. 安裝Node.js 18.3以上版本
學習目標：
1. 本地建立SPA (Single Page Application)
2. 基於Vite建置設置來使用Vue的SFCs (Single-File Components)

開始下指令！

Node.js 是一個讓 JavaScript 可以在服務器端運行，並且使用非阻塞 I/O 模型來處理高效並發操作的執行環境。

首先確認你電腦 Windows or Mac or Linux有沒有Node.js?
如果你還沒安裝它，快安裝！ https://nodejs.org/en/download/package-manager

NVM ⮕ Node版本管理器 來安裝node (內建npm)，
NPM ⮕ 管理 Node.js 套件的軟體工具。
NODE ⮕ 啟動 Node.js 執行環境的指令
安裝完就可以執行檢查版本

npm -v
node -v

假如電腦已經安裝，可以更新版本

// 更新 node
nvm install node
// 更新 npm
npm install -g npm

創建專案

找一個IDE(VSCODE)，創建一個工作目錄，在Terminal下執行

npm create vue@latest	

一連串按下YES/NO 確認之後，安裝了很多東西？

等下要繼續下這些指令

點進資料夾看，好多東西唷 @@
先不管了～先按照指示 繼續輸入指令執行

cd vue-project  // 看你命名什麼專案
npm install
npm run format
npm run dev

執行npm run 的時候都會找資料夾底下的package.json去執行相對應的scripts內容
有空再來翻翻看寫什麼www~

看到這個畫面恭喜！點下Local的連結就可以開啟網頁！

執行玩這些建置步驟，看到網頁呈現，然後呢？
官方說這個範例是由Composition API & <script setup>編寫的，而不是Options API。
Composition API 是 Vue 3的新技術，而Options API 是Vue 2.X以前版本的技術，
<script setup>是Vue 3.2引入的語法糖，用於簡化使用 Composition API 編寫組件的過程。它的目的是使代碼更簡潔、更易讀，並且在使用 Composition API 時避免一些樣板代碼。

構建APP的生產版本

npm run build

將會在專案資料夾下產生dist的資料夾

// 安裝簡易http伺服器來測試看看
npm install -g http-server
// 執行這個資料夾內容，檢查生產版本內容
http-server dist

從CDN使用Vue

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

1. unpkg
2. jsdelivr
3. cdnjs

當從 CDN 使用 Vue 時，不需要進行“構建步驟(build step)”。這使得設置變得更加簡單，適合增強靜態 HTML或與後端框架集成。然而，你將無法使用單文件組件（Single-File Component, SFC）語法。

使用全局建構 - Global Build

當你從 CDN 加載 Vue 時，通常使用的是 Vue 的全局構建版本。這意味著 Vue 的所有功能和 API 都可以通過全局的 Vue 對象來訪問。這種方式使得使用 Vue 變得非常簡單，尤其是在不需要進行構建步驟的小型應用程序或原型設計中。

<!-- 引入 Vue 的全局構建 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<!-- 定義應用程序的 HTML 結構 -->
<div id="app">{{ message }}</div>

<script>
  // 使用解構賦值從全局 Vue 對象中引入 createApp 和 ref 方法
  const { createApp, ref } = Vue

  // 創建並掛載 Vue 應用
  createApp({
    // setup 函數是 Composition API 的一部分，允許我們在函數內定義組件的狀態和行為
    setup() {
      // 使用 ref 創建一個響應式變量 message，並將其初始化為 'Hello vue!'
      const message = ref('Hello vue!')

      // 將 message 變量返回，使其可以在模板中使用
      return {
        message
      }
    }
  // 將 Vue 應用掛載到 HTML 結構中 id 為 app 的元素上
  }).mount('#app')
</script>

指南中大多數介紹 Composition API 的範例都會使用 <script setup> 語法。這種語法需要構建工具來編譯和打包你的 Vue 項目。如果你不想使用構建工具（例如在沒有構建步驟的環境下開發應用），你可以使用 setup() 選項來定義組件的邏輯。setup() 選項是一種不需要構建工具的方式來使用 Composition API，適合在更簡單或不需要構建步驟的項目中使用。

使用ES模塊建構 - ES Module Build

在後續學習中，將主要介紹如何使用 ES 模塊語法來編寫 Vue 應用。ES 模塊（ES modules）是一種 JavaScript 的模塊化標準，現代瀏覽器（如 Chrome、Firefox、Edge 等）已經原生支持它。因此，我們可以通過原生 ES 模塊語法直接從內容分發網絡（CDN）加載 Vue，而不需要傳統的構建工具。這種方法簡化了項目的設置過程，使得我們可以更方便地在瀏覽器中使用 Vue。

<!-- 定義應用程序的 HTML 結構 -->
<div id="app">{{ message }}</div>

<script type="module">
  // 從 CDN 引入 Vue 的 ES 模塊構建版本
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  // 創建並掛載 Vue 應用
  createApp({
    // setup 函數是 Composition API 的一部分，允許我們在函數內定義組件的狀態和行為
    setup() {
      // 使用 ref 創建一個響應式變量 message，並將其初始化為 'Hello Vue!'
      const message = ref('Hello Vue!')

      // 將 message 變量返回，使其可以在模板中使用
      return {
        message
      }
    }
  // 將 Vue 應用掛載到 HTML 結構中 id 為 app 的元素上
  }).mount('#app')
</script>

請注意，我們使用的是 <script type="module">，並且引入的 CDN URL 指向的是 Vue 的 ES 模塊構建版本。

定義模塊引入路徑 - Enabling Import maps

在上面的範例中，我們從完整的 CDN URL 進行引入，但之後會常看到這樣的代碼：

import { createApp } from 'vue'

我們可以通過使用 Import Maps 告訴瀏覽器從哪裡找到 vue 引入：

<!-- 使用 Import Maps 定義模塊引入路徑 -->
<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<!-- 定義應用程序的 HTML 結構 -->
<div id="app">{{ message }}</div>

<script type="module">
  // 從 Import Map 定義的路徑引入 Vue 和 ref
  import { createApp, ref } from 'vue'

  // 創建並掛載 Vue 應用
  createApp({
    // setup 函數是 Composition API 的一部分，允許我們在函數內定義組件的狀態和行為
    setup() {
      // 使用 ref 創建一個響應式變量 message，並將其初始化為 'Hello Vue!'
      const message = ref('Hello Vue!')
      
      // 將 message 變量返回，使其可以在模板中使用
      return {
        message
      }
    }
  // 將 Vue 應用掛載到 HTML 結構中 id 為 app 的元素上
  }).mount('#app')
</script>

Import Maps 允許你告訴瀏覽器在進行模塊引入時，應該從哪裡找到特定的庫。這樣，我們只需要在 Import Maps 中定義一次 URL，就可以在整個項目中簡化引入語句。

使用這New Feature技術需要考慮一下瀏覽器支援度。

開發構建版本 vs 生產構建版本：

• 當前的範例使用的是 Vue 的開發構建版本（development build），這種版本主要用於開發過程，包含了更多的錯誤檢查和警告，有助於開發時調試代碼。
• 在生產環境中，你應該使用生產構建版本（production build），這種版本移除了額外的錯誤檢查和警告，體積更小，性能更高。你可以參考生產部署指南來瞭解如何正確地在生產環境中使用 Vue。

不使用構建系統的替代方案：

• 雖然可以不使用構建系統直接使用 Vue，但這並不是最佳實踐，特別是在現代前端開發中，構建系統能夠帶來更高效的開發流程和更優化的生產代碼。
• 另一種替代方案是使用 vuejs/petite-vue，這是一個更輕量級的 Vue 版本，適用於一些簡單的互動場景，類似於過去使用 jQuery 或現在使用 Alpine.js 的場合。這種輕量級框架適合那些需要快速實現簡單功能且不想配置構建系統的情境。

拆分模塊 - Splitting Up the Modules

隨著深入學習官方指南，可能需要將代碼拆分到不同的 JavaScript 文件中，這樣更容易管理。例如：

<!-- index.html -->
<!-- 定義應用程式的掛載點 -->
<div id="app"></div>

<!-- 使用 ES 模塊導入 Vue 並創建應用程式 -->
<script type="module">
  // 從 Vue 庫中導入 createApp 函數
  import { createApp } from 'vue'
  // 從 my-component.js 文件中導入 MyComponent 組件
  import MyComponent from './my-component.js'

  // 創建 Vue 應用程式並掛載到 id 為 app 的元素上
  createApp(MyComponent).mount('#app')
</script>

// my-component.js
// 從 Vue 庫中導入 ref 函數
import { ref } from 'vue'

// 定義並導出組件
export default {
  // setup 函數用來定義組件的邏輯
  setup() {
    // 定義一個反應式狀態 count，初始值為 0
    const count = ref(0)
    // 返回組件中使用的狀態或方法
    return { count }
  },
  // 定義組件的模板，顯示計數值並在點擊時增加計數
  template: `<div>Count is: {{ count }}</div>`
}

當應用程序變大時，將代碼拆分到多個文件有助於提高代碼的可讀性和可維護性。

在這個例子中，index.html 文件中通過 <script type="module"> 標籤來導入 Vue 和一個名為 MyComponent 的組件，並將該組件掛載到 #app 元素上。MyComponent 組件在 my-component.js 文件中定義，使用 Vue 的 ref 函數來創建一個反應式的計數器。

需要注意的是，直接打開本地文件 (file:// 協議) 會導致 ES 模塊無法正常工作，因為瀏覽器出於安全原因只允許 ES 模塊在 http:// 協議下工作。為了讓本地文件使用 ES 模塊，需要通過本地 HTTP 伺服器來提供文件服務。

實用技巧：如果你使用 VS Code 編輯器，可以通過安裝 es6-string-html 擴展來獲得 JavaScript 字符串中的 HTML 語法高亮。

繼續探索Vue框架摟～ 對html, css, javascript也仍是一知半解，
沒關係！！！遇到問題解決就對了！