前言

在研究 Vue 的時候第一個吸引我的，絕對是版本名稱。

• 1.0: "Evangelion" (新世紀福音戰士)
• 2.0 "Ghost in the Shell" (攻殼機動隊)
• 2.1: "Hunter X Hunter" (獵人)
• 2.2: "Initial D" (頭文字D)
• 2.3:"JoJo's Bizarre Adventure" (JoJo 的奇妙冒險)
• 3.0: "One Piece" (航海王)

順帶一提 現在的版本名稱叫做天元突破 紅蓮螺巖 ( 太中二了我喜歡

source

Vue 基本上應該是現代前端開發起步一定會聽到的名詞
也是初學者決定放棄的第一步(?

上一篇文章有短暫提到 我一開始並不是用 Vue 而是用 React
什麼? 你問我有差嗎

其實現在回頭看 如果跟目前的 Vue 使用經驗相比 
抱歉我感覺根本沒用過 React XD
至少我從 React 轉 Vue 沒有太多陣痛期

很多概念是共通的 只是換個名詞
那接下來我們就來介紹 Vue 這個漸進式框架囉

漸進式框架是什麼

起初 Vue 想做的事並沒有現在那麼多, 
而是可以根據使用者自己的需求來搭配不同的工具鏈自由轉換
ex: SPA、SSR、桌面應用、手機應用等等等
也因為這樣的特性讓 Vue 的使用上下限很高

安裝 — Vite

Vite 也是 尤雨溪 創建的一款建構工具
以速度聞名, 目前大多數框架都建議以 Vite 為建構工具
Vite 也提供了建構模板指令, 使用上非常簡單

請你打開你的 terminal 並輸入以下指令

# 移動到你要建構專案的地方, 這邊我放在桌面示範
$ cd Desktop

# my-vue-app 你可以自行修改成你想要的專案名稱
$ npm create vite@latest my-vue-app -- --template vue

小提醒
$ 代表 Terminal 指令, 不需要複製

創建完後打開你的 .vue 檔, 也就是所謂的 SFC 檔

SFC (Single-File Component)

在創建 Vue 檔時, 內部的程式碼結構會類似 HTML 檔

也就是說會把邏輯、模板、樣式封裝在檔案內

打開來看又會覺得他跟一般的 HTML 有點不一樣

• 原先 HTML 的 body 變成了 template
• script 拉出來跟 template 同層, 旁邊多了 setup
• style 旁邊多了 scoped

<style scoped> 蠻好解釋的, 就是要把這邊的樣式封裝在這個 SFC 裡面, 避免全局汙染
<script setup> 其實是 Composition API 的 setup() 的語法糖
為避免文章重點過於發散, 剛開始使用框架的人還不需要知道它的底層邏輯
這個詳細的部分會在後面的生命週期篇章詳細解釋。

開啟 dev server

這時我們再按下 `Ctrl + `` 或是直接用滑鼠按著把這條藍線往上拉
就可以叫出你的 terminal

再輸入以下兩行

# 這個指令是用來安裝 Package.json 裡所列出的依賴套件
$ npm install 

# 用來啟動開發伺服器
$ npm run dev

恭喜你! 你正式成為新時代的一員了

純引戰

補充

Q: 為什麼我看到網路上的教材都長得不太一樣?
A: 目前最新版雖然是 Vue3 + Composition API,
但目前還是有很多人乃至公司都是使用 Vue2 + Option API,
那短期內 Option API 也不會被版本淘汰, 因此還是有很多人是仰賴這些文章得到解決方案
選項式 API 會被廢棄嗎？

結語

今天我們講到了 Vue 版本的前世今生, 快速使用 Vite 來建構 Vue 的模板
簡單講解了 SFC 檔案架構, 並開啟了 dev server, 並簡單講解了 Vue2 跟 Vue3 最核心的差異。

對於剛學完 HTML, CSS, JS 的新手來說，這可能會是很艱難的第一步,
因此為了降低各位的學習門檻, 觀念類的東西會盡量放在篇章後半段。

如果你喜歡這個系列或是想看我發瘋, 歡迎按下 訂閱 一起走完這三十天吧

一些小練習

1. SFC 可以看做是哪些檔案的綜合體?
2. Vite 除了 Vue 還可以用來建構什麼前端框架的專案,
3. Vite 只能用來建構網頁應用嗎?
4. 在 Vite 之前 Vue 是透過什麼工具來建構專案的
5. npm run dev 之後實質上做了什麼, 推薦可以看龍哥的這部 [Vite 原始碼解讀] npm run dev 之後...

資料來源

1. Vue Doc
2. Vite