VueJS - 環境設定

Hello, 未來的 Vue.js 開發者們！我很興奮能與你們一起踏上這個旅程，探索 Vue.js 的精彩世界。作為你們親切鄰居的計算機科學老師，我將指導你們設定 Vue.js 的開發環境。如果你是編程新手，別擔心——我們會一步步來，在你還沒有察覺之前，你將能夠創建出令人驚艷的網頁應用！

VueJS - Environment Setup

為什麼選擇 Vue.js？

在我們開始設定之前，讓我分享一個簡短的故事。幾年前，我一直在為複雜的網頁開發專案而苦惱。然後我發現了 Vue.js，這就像在網頁框架的叢林中找到了一把瑞士軍刀。它簡單、強大且靈活——對初學者和專家來說都是完美的選擇！

現在，讓我們動手以四種不同的方式設定 Vue.js。

在 HTML 檔案中直接使用

這種方法是開始使用 Vue.js 最簡單的方式，特別是如果你只是想試水溫。這就像訂購一預先做好的餐點——快速且簡單！

這樣做：

<!DOCTYPE html>
<html lang="zh-tw">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一個 Vue App</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>

讓我們來分解這個過程：

我們在 <head> 區塊中通過 <script> 標籤引入 Vue.js 库。
我們創建一個 id 為 "app" 的 <div>——這就是我們 Vue 應用將要運行的位置。
在頁面底部的 <script> 標籤中，我們創建一個新的 Vue 實例，並告訴它目標元素是 id 為 "app" 的元素。
我們設定一個 data 物件，其中有一個 message 屬性。
在 HTML 中，{{ message }} 將會被替換成 "Hello Vue!"。

使用 CDN

CDN 的意思是內容發布網絡。這就像為你的代碼提供披薩送餐服務——快速且方便！這種方法與直接使用 script 標籤的方法相似，但使用 CDN 链接。

<!DOCTYPE html>
<html lang="zh-tw">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用 CDN 的 Vue</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{ title }}</h1>
<p>{{ content }}</p>
</div>

<script>
new Vue({
el: '#app',
data: {
title: '歡迎來到 Vue！',
content: '這是從 CDN 加載的。'
}
})
</script>
</body>
</html>

這裡的主要區別在於我們使用 CDN 链接來加載 Vue.js。這對於快速原型設計或學習來說非常不錯，因為你不需要下載任何東西。

使用 NPM

NPM 的意思是 Node 包管理器。這就像一個巨大的圖書館，你可以在裡面借（或者在這個情況下，下載）代碼包。這種方法更適合於大型專案。

首先，你需要在電腦上安裝 Node.js。然後按照以下步驟操作：

打開終端或命令提示符。
切換到你的專案目錄。
執行以下命令：

npm init -y
npm install vue

現在，創建一個名為 app.js 的文件，並添加以下代碼：

import Vue from 'vue'

new Vue({
el: '#app',
data: {
message: '從 NPM 來的問候！'
}
})

在你的 HTML 文件中：

<!DOCTYPE html>
<html lang="zh-tw">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用 NPM 的 Vue</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="app.js"></script>
</body>
</html>

這種方法允許更好的依賴管理，並通常用在更複雜的專案中。

使用 CLI 命令列

Vue CLI（命令列介面）就像有一個個人助理來設定你的 Vue.js 專案。它非常強大，並為你設定一個完整的開發環境。

要使用 Vue CLI：

使用 NPM 全局安裝：

npm install -g @vue/cli

創建一個新專案：

vue create my-vue-project

cd my-vue-project

開始開發服務：

npm run serve

CLI 將為你創建一個專案結構，包括一個 src 文件夾，其中有你的主 App 组件和其他必要文件。

以下是你 App.vue 文件的一個簡單示例：

<template>
<div id="app">
<h1>{{ title }}</h1>
<p>{{ description }}</p>
</div>
</template>

<script>
export default {
name: 'App',
data() {
return {
title: '歡迎來到你的 Vue.js App',
description: '這是使用 Vue CLI 創建的！'
}
}
}
</script>

<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

這樣就為你設定了一個包含模板、腚本和樣式區塊的组件——相當方便吧？

方法總結

這裡是我們所介紹的方法的快速比較：

方法	使用難度	最適用於	預設條件
Script Tag	非常容易	快速開始，學習	無
CDN	容易	原型設計，小專案	無
NPM	中等	中到大型專案	安裝 Node.js
CLI	高級	大型，複雜專案	安裝 Node.js，NPM

記住，沒有一種方法是“最好的”——這完全取決於你的專案需求和个人偏好。當你對 Vue.js 越來越熟悉時，你自然會傾向於使用最適合你的方法。

這就是全部！現在你已經有了四種設定 Vue.js 環境的不同方法。無論你是剛開始還是計劃一個複雜的應用，你都擁有了開始 Vue.js 旅程的工具。

記住，精通編程的關鍵是練習。所以不要害怕嘗試這些不同的設定方法。嘗試使用每種方法創建小型專案。在你還未察覺之前，你將會成為一位 Vue.js 的魔法師！

快樂編程，願 Vue 伴你左右！??‍??‍?

Credits: Image by storyset