#2 Vue CLI介紹 30天學會 vue系列文 | seansie blog

Jan 14, 2025

工欲善其事，必先利其器，vuejs團隊為各位開發者提供了一個好工具 vue CLI 。

你可能在第一章，透過 script src 的方式匯入了vuejs，使用起來感覺也不錯，但是老實說這只是為了降低初學者的學習難度而做的權宜之計而已。

正港的方法還是透過 Vue CLI 來進行 vuejs 應用程式開發會比較好，他有許多單純使用標籤匯入法無法提供的功能，待會會一一介紹。

那說了這麼多，事不宜遲來開始介紹使用方法。

終端機介紹

應該有這方面基礎的讀者都知道吧，如果不知道，而且幸運的跟我一樣用 vscode 英文版的話，在最上面有個 Terminal 按鈕，按下有個 new terminal選項，按他完在下面就會看到有個黑色東西(如下圖)這就是終端機

而本文所提，在終端機中輸入，就是把命令輸入到裡面，而執行就是按下 enter 。

甚至因為這個提到的頻率實在太高了，可能本人描述的時候會說使用 mycommand 命令等等比較模糊的詞彙、甚至直接用程式碼字形 (例如 consolas )暗示為命令，別忘了就是輸入終端機+執行的意思

其實終端機現在不僅沒落五而且還是個很強大的工具，之後預計會專門寫一篇來深度講解。

如何安裝 nodejs

在終端機根據不同的作業系統輸入。

windows winget install -e --id OpenJS.NodeJS
mac brew install node
linux (ubuntu) sudo apt install nodejs 如果無法安裝記得用 sudo apt upgrade 或 sudo apt update 更新。

winget brew apt 可以理解成不同平台上的手機應用程式商店，只是手機是下載APP，這些是下載軟體。

安裝後透過在終端機輸入 node -v 來驗證是否有安裝成功。

正常安裝會出現

PS C:\Users\seans> node -v
v21.6.1
PS C:\Users\seans>

然後本人非常非常非常強烈推薦再安裝一個 pnpm 有點像是增強版的 npm

他的速度遠比 npm 快很多，因為它會重複使用已經下載過的資源，不過他依賴於 npm 所以要透過 npm 安裝。

透過以下命令安裝

npm install -g pnpm

安裝完畢後，輸入 pnpm -v 驗證安裝，如果有輸出版本編號就代表安裝成功，畫面跟 node -v 一模一樣。

好，現在使用 pnpm 來使用vue CLI，對了，如果你的電腦語言是中文， vuejs 還很貼心的提供在地化，也就是會自動轉成中文版。

pnpm create vue@latest

然後這個CLI相當人性化，有互動式的介面來跟使用者提問，問題如下

Vue.js - The Progressive JavaScript Framework

√ 請輸入專案名稱： ... vue-project
√ 是否使用 TypeScript？ ... 否 / 是
√ 是否啟用 JSX 支援？ ... 否 / 是
√ 是否引入 Vue Router 進行單頁應用程式開發？ ... 否 / 是
√ 是否引入 Pinia 用於狀態管理？ ... 否 / 是
√ 是否引入 Vitest 用於單元測試 ... 否 / 是
√ 是否要引入一款端對端（End to End）測試工具？ » 不需要
√ 是否引入 ESLint 用於程式碼品質檢測？ » 否

其他其實選了也無彷啦，只是對於初學者 強烈建議 把 typescript 關掉，因為 typescript 強制要標註每個物件的資料型態(例如整數字串等等)，雖然可以減少錯誤，但是這個對初學者相當不友善。

這邊也可以看出vuejs漸進式的特質啦，從最基本的功能開始，然後漸漸地加上越來越進階的功能，這樣在保持核心簡潔的同時，功能也不失強大。

正在建置專案 C:\Users\seans\codewhitelist\temp\vue-project...

專案建置完成，可執行以下命令：

  cd vue-project
  pnpm install
  pnpm dev

PS C:\Users\seans\codewhitelist\temp>

接下來他華語化的提示已經很清楚了吧，照著他的步驟執行就好了。

如果沒有執行的話，貿然執行 pnpm dev 啟動開發伺服器，會出現以下錯誤訊息

> vue-project@0.0.0 dev C:\Users\seans\codewhitelist\temp\vue-project
> vite

'vite' is not recognized as an internal or external command,
operable program or batch file.
 ELIFECYCLE  Command failed with exit code 1.
 WARN   Local package.json exists, but node_modules missing, did you mean to install?

如果看到這個，記得補執行 pnpm install

專案資料夾介紹

產生完成後，資料夾結構大致如下

├─.vscode
├─node_modules
├─public
└─src
    ├─assets
    └─components
        └─icons

讓我一一介紹以上資料夾

src 用來存放網站的原始碼的地方，例如主元件 App.vue 、入口腳本 main.js (註: .vue 格式是 vuejs 專門儲存元件的檔案格式，等一下會介紹)
- components 用來儲存其他元件的地方
- assests 用來儲存靜態內容的地方，例如圖片等
node_modules : 用來儲存 pnpm 安裝的模組，例如等等會提到的 vite 網站編譯器等
.vscode : vscode的設定文件，用 vscode編輯器的人會有

常見命令

pnpm dev 啟動開發伺服器。

輸入此命令後，會在終端機顯示本機網址(localhost:????) ????是埠號，以我為例，會出現

> vue-project@0.0.0 dev C:\Users\seans\codewhitelist\temp\vue-project
> vite

  VITE v6.0.7  ready in 2568 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Alt(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools
  ➜  press h + enter to show help

而 http://localhost:5173/ 就是所謂連線到自己的本機網址，僅本機可見而已，外面是連不到的。

因為vuejs 每次建立專案就會自動插入 hello vue 的元件，所以如果是剛建立的專案，執行 pnpm dev 的時候，打開看到該元件所構成的歡迎畫面

如下所示

不知道localhost是啥的可以參考這個

https://zh.wikipedia.org/zh-tw/Localhost

.vue元件格式介紹

在第一章，我們是用 Vue.createApp({}) 的方式來建立 vuejs 應用程式，但是你仔細看看

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
	<div class="app">
		<h1>hello {{ msg}} </h1>
	</div>
</body>
</html>
<script>
	Vue.createApp({
		data(){
			return{
				msg: "Vuejs"
			}
		},
	}).mount(".app")
</script>

看起來是不是挺複雜的，要是小專案還好，如果是大專案的話還得了，全部的功能混在一起，恐怕讓人顧此失彼，錯誤連篇。

而如果用 .vue 元件檔案可把它轉換成主元件。

元件就有點像是便當盒，把主菜，配菜、飯，全部裝到一個盒子裡，可以很方便的打包帶走，並且元件還可以使用其他元件，有點像便當盒中的便當盒。

而最大的元件叫做值主元件，會存放在 /src 目錄之下，名稱通常叫做 App.vue ，透過 main.js 裡面的程式碼掛載(掛載定義第1章提過)

// main.js
import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

而 main.js 中有一行可能沒看過，就是 import App from './App.vue 這個意思是把 App.vue 檔案當作物個物件匯入到 main.js ，然後命名為 App ，這個功能會在 App.vue 透過 export default 實現。

一個完整的 vue元件檔案需要有以下三部分

template : 代表該元件的 HTML 元素，通常會有模板 {{}} 語法。
script : 代表該元件的邏輯(定義該元件要怎麼互動)
style : 代表 CSS ，而本系列文章不會過多著墨在 CSS ，而是使用 bootstrap 或 vuetify 等模組來避免繁瑣的 CSS 語法。

然後開始轉換剛剛的版本成 .vue 檔案，先想想看， <template> 標籤裡面到底要放甚麼?

仔細想想，這個元件不是要掛載的? 掛載是掛在 div 標籤上，那自然而然的 template 標籤就是放 div 標籤中的元素了。

app.vue
<template>
	<h1>hello {{ msg}} </h1>
</template>

<style>
</style>

然後 <script> 的部分，只要保留裡面的元件邏輯物件就好，複習一下。

Vue.createApp({從這裡
		data(){
			return{
				msg: "Vuejs"
			}
		},
	到這裡是元件邏輯物件，負責定義該元件怎麼動，是元件大腦}).mount(".app")

然後因為是外部檔案，按照 js 的家規，需要加上 export default 以利匯出，才能在 main.js 中順利以物件形式匯入

<script>
export default{
	data(){
		return{
			meg: "Vuejs"
		}
	}
}
</script>

Vite 網站編譯器介紹

編譯介紹

剛剛不知道有沒有發現，網站元件檔案是 .vue 不過天下可沒有瀏覽器打得開這種格式，說實在的， .vue 格式只是方便開發而已，如果是要真正使用還是只能接受 html ,css,js 等等檔案。

有人就會說，那你剛剛瘋狂推薦 vue CLI ，結果搞出這種沒用的東西，不是在浪費我的時間嗎，等等還要把它復原回去，真是浪費時間，被騙了!

誤會誤會! 其實這個過程有程式可以代勞，而且還是 vue CLI 內建的，就是標題所介紹的 vite 。

它可以把 vue html js css 等等檔案自動還原成能被瀏覽器接收的形式，有點像是食品加工廠一樣，把原材料 (e.g. vue元件檔案) 加工成美食 (瀏覽器可以打開的形式)

像剛剛執行 pnpm dev 的時候，看看終端機，不是有 vite 的字樣嗎，其實已經在用 vite 的功能了，它自動的編譯成瀏覽器可讀的格式，然後還貼心的為大家準備了開發用伺服器，輸入網址就能用。

熱重載

此外，他還有熱重載(hot reload)功能，如果原始檔案 (e.g. .vue 檔案有變化，在瀏覽器上可以及時看到變化，不用重新啟動，在常常需要改來改去的情況特別實用。

最小化

而如果想要匯出靜態網頁，那需要輸入 pnpm build 命令，它就會把編譯完的成果輸出在 /dist 資料夾中，它的特點是有經過最小化 minification 跟搖樹 (tree shaking)

甚麼是最小化呢?舉個極端點的例子

function aFuncHaveAverylooooooooooooooooooooooooooooooooooooooooooooooooooongname(){
	console.log("hello js")
	}
	aFuncHaveAverylooooooooooooooooooooooooooooooooooooooooooooooooooongname()

看到這個變數名稱讀很久吧，電腦雖然快，但是他也是一個字一個字讀取的，如果常常發生這種變數名稱特別長的狀況，還是會引響效能的。

因此，最小化的思路就是，把這個名字改掉，在不影響功能的前提之下，盡量縮小程式碼的長度，不僅名稱，包括不必要的空格換行註解都會被清除，確保該 js 檔案能以最高效率被瀏覽器讀取。

而搖樹是把不必要的程式碼移除，也算是最小化的一種。

網站效能重要性

俗話說，天下武功，為快不破，這句話講到爛掉了啦，不過在網頁開發中真的如此，慢吞吞的網站速度會明顯的流失許多重要客戶，詳情可以看看這個網站介紹。

https://seo.whoops.com.tw/website-speed-matters/

所以網站效能也是很重樣的，而 vite 預設就會把這些東西用好，讓開發者不用煩惱這些事情，這也是我為甚麼推薦用 vue cli 的原因。

順帶一提， vite 是跨框架的，它不僅可以編譯 vue 也可以用 react preact angular solid lit astro等等常見知名框架，詳情可以到它的官網看

https://vite.dev/

本章到此結束，欲知後事如何，請見下回分曉。

下章介紹vue的元件系統