從零開始的 Vue3 生活-安裝環境及建立應用程式

前言

Vue 是一個漸進式框架，那麼何謂漸進式框架? 這裡簡單來的講就是想要使用甚麼功能可以自己決定，只需載入 Vue 的核心就好

將 Vue 加入到專案的方式總共有 4 種：

1. 在 HTML 上以 CDN 方式引入
2. 下載 JavaScript 並自行管理 (這個方法其實跟 CDN 方式差不多)
3. 使用 npm 安裝
4. 使用官方的 CLI 來建立專案

---

CDN 載入

在學習時或是在開發小專案時，用 CDN 載入是比較方便的選擇：

<script src="https://unpkg.com/vue@next"></script>

CDN 上 @next 指的是 Vue 目前最新的版本，目前最新的版本是 3.x，當然你也可以使用 2.x 版本：

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

---

npm 載入

用 Vue 開發大型應用時推薦使用 npm 安裝，npm 能很好的配合 webpack 等等打包工具使用：

# 最新穩定版
$ npm install vue@next

---

CLI 載入

Vue 提供了一個 官方的 CLI，能為單頁式應用(SPA)快速地建置專案以及專案需要使用的功能。只要幾分鐘就能運行，並能帮助你在不需重新啟動程式的情况下快速的進行測試等等。

建議先熟悉 CDN 方式了解 Vue 後，再使用 CLI 建構，會比較有頭緒自己在幹嘛。

如果是用 Vue3.x 版本，要使用 Vue CLI v4.5.x 版本：

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

需要升級版本的話：

vue upgrade --next

---

Vue devtools 擴充功能

一個實用的 Chrome 擴充套件，可以在裡面檢查元件等等的資料變化按下 F12 開發者工具查看：

建立應用程式

先創建一個 HTML，裡面包含以下程式碼：

<div id="app">
  <!-- 雙大括號用來包要顯示的資料、 -->
  {{ message }}

  <!-- 雙大括號也可以填入 JavaScript 的表達式 -->
  {{ message + 'tom' }}
</div>
<script src="https://unpkg.com/vue@next"></script>

const app = {
  data() {
    return {
      message: 'Hello World',
    }
  }
}

// mount 指定要掛載元素
Vue.createApp(app).mount('#app')

Mustache 插值

資料綁定最常見的方式就是使用 “Mustache” 語法(雙大括號)來插值：

<div>{{ name }}</div>

除了能綁定 data 裡的屬性值，也能在裡面使用 JavaScript 的表達式：

<div>{{ name + 1 }}</div>
<div>{{ name ? 'tom' : 'lucy' }}</div>
<div>{{ name.split('') }}</div>

---

參考資料

Vue官方