[ 從 Vue3 開始的學習筆記 #01 ] 新建一個 Vue 專案

7 min readJul 29, 2021

前言

Vue 在亞洲有很龐大的使用族群，眾所皆知 Vue2 到 Vue3 是一次很大的版本改動，在各方面都有卓越的提升，而且 Vue3 也完美支持 TS。

所以為了將來，也許再過幾年 React 漸漸衰弱 ( 希望不要，我真的很愛 React ) 的時候留有後路，我終於也要開始學習 Vue 了。

雖說 Vue3 在商業開發上的運用並不廣泛，大多數的公司都還是保守使用 Vue2，但 Vue2 終究是會隨著時間而被淘汰。

至於為什麼選擇從 Vue3 開始呢？我一直都是寫 React，以前也沒怎麼接觸過 Vue，所以對 Vue2 可以說是完全沒概念。因此對我來說學 Vue2 還是 Vue 3 都是一樣的 ( 一樣新 🤣 )。而且既然有新的我就想學最新的，所以我的 Vue 入門之旅就決定從 Vue3 開始啦！

這篇就只是建立新專案的步驟，沒什麼學習壓力，基本上無腦照步驟做就可以了。

如何在專案使用 Vue？

如同 React 和 Angular 一樣，我們可以使用多種方式來建立專案，例如：

在 Html 的 <script></script> 標籤中直接引入。
使用 npm 安裝 vue 並自行設置 webpack。
最方便快速也最多人用的 Vue CLI。

—

以下我會用 Vue CLI 來示範。

什麼是 Vue CLI？

如果你和我一樣有 React 經驗，你可以想成就是 create-react-app 的概念。或是你曾寫過的 Angular 的話，它就相當於 @angular/cli 工具。

簡單來說，Vue CLI 幫助開發者把常用到的資源都打包起來，像是 webpack、sass、eslint、hot-reload、dev-server 等環境都由 Vue CLI 幫我們建立好了，讓開發者可以快速建立一個即裝即用的專案。

—

在打開 Terminal 新建 Vue 專案之前，請先確認你有的電腦已經安裝過 Node 環境，這是前端之路最最最最最基本的起手式哦！

建立 Vue 專案

我們可以使用 npx 新建專案，也可以先安裝 vue-cli 環境再使用 vue 指令新建專案。

兩個方式我都會介紹，以上兩個做法都可以建立 Vue 專案，只需要選一個做就可以了。

💡 以下兩種做法都可以建立 Vue 專案，你只需要選一個做就可以了。

首先打開 Terminal 準備輸入指令。

—

方法 1：使用 npx 建立專案

npx @vue/cli create my-project

方法 2–1：全域安裝 vue-cli 環境並建立專案

npm install -g @vue/cli

方法 2–2：建立 Vue 專案

vue create my-project

後面 my-project 的部分代表你要新建的專案名稱，在你輸入完指令並按下 Enter 之後，你會看到這樣的畫面：

Vue CLI 工具會詢問你希望建立 Vue2 還是 Vue3 的專案，又或者是你想自行手動選擇版本、手動設定套件。這裡使用上下鍵控制當前選項位置，按 Enter 鍵即代表選完並繼續下一步。

我比較龜毛，我喜歡自己選擇，所以這裡我選 Manually select features 繼續設定我要的環境。

—

接著會進入選擇 Vue 版本和套件的選項頁。

一樣用上下鍵控制當前選項位置，按空白鍵控制選取/不選取，按 Enter 鍵即代表選完並繼續下一步。

這部分應該不會太困難，例如你有使用 TypeScript 的話就選起來，或是習慣使用 SASS、LESS 等工具撰寫樣式那就選擇 CSS Pre-processors，根據個人開發需要選擇即可。就算真的不小心漏掉了也沒關係，到時候再手動安裝就好了。

都選好之後按下 Enter 進行下一步設置版本和套件細項。

—

接著它會詢問我們要使用的 Vue 版本為哪一個，這邊我們選擇 3.x ( Vue 3 )。

—

再來詢問我們使用的 CSS Pre-processors 工具是什麼？我習慣用 SCSS 所以我選擇 Sass/SCSS，不管你選擇 Sass/SCSS (with dart-sass) 或 Sass/SCSS (with node-sass) 都不影響你後續的開發工作，這只是相依的套件不同而已，都可以選。

—