tldr: Vue.js 是一個有彈性的JavaScript框架，讓用戶可以循序漸進地使網站越家豐富

在淺談完網頁的基礎，HTML5之後，今天筆者想與各位分享一下一個對於開發網頁時十分便利的一款工具：Vue.js。至於它究竟有甚麼特別的，今日就來認識一下吧！

與往日相同，先來個100秒影片簡單了解它吧！

所謂的「彈性學習」......

想像一下，當我們終於為網頁蓋好了名為HTML和CSS的骨架了，但有些地方你就是想讓它動起來、產生一點變化，像是點一個按鈕會出現不同內容，或者有個輸入框可以即時搜尋資料之類的。這時候你不需要將整個網頁打掉重練，只要在要互動的那個區塊，輕輕鬆鬆地將簡單的Vue.js程式嵌進去，它便會神奇地變出你想要的效果，讓網頁活潑了起來。

這個程式框架(Framework)是基於HTML, CSS和JavaScript所建立的，對熟悉這部分語法的人而言非常容易上手。除此之外，它的官網中也提供了詳細的說明文件、互動式教學課程，以及一個簡易的「遊樂場Playgroud」，讓初次接觸的人可以透過這些資源，一步一步的熟練其功能與使用方法。

Vue.js有一個很大的特色，便是它的「漸進式框架Progressive Framework」，讓使用者能夠先完成網頁主體的製作，再如同積木一般，將想要的功能一個個逐漸地加上去。不論是後端伺服器的Rendering，或是Router等等的功能，它也有著一個完善的函式庫供我們使用。

此外，它有著優秀的Render(渲染)系統，能夠產生種彷彿「網頁自動更新」的效果。每當使用者變更資料的數值，網頁上所有使用到這份資料的地方都會更著憶起更新，這省下了我們手動重新載入網頁的麻煩。

來安裝吧

它的安裝非常的簡單，且是跟著專案跑的，而非整個電腦資料通用。我們只需要在輸入下列指令，便會開使一個安裝小程式的運行：

npm create vue@latest

✔ Project name: … MyProject
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

Scaffolding project in ./MyProject...
Done.

我們一個個選項根據需求選擇完成後，它便會為我們建立一個專案資料夾，這時進到資料夾並完成下載(第一行)後，我們的Vue專案便能開始運作啦！

npm install
npm run dev