Vue3 101-1

前言

這個 Vue3 101 的系列，是一個關於 Vue3 的學習入門，我將會分享關於學習 Vue3 的一切基礎，所以非常適合從零開始想要接觸前端開發的朋友。

那麼學習 Vue3 需要會什麼樣的技術背景？

一點點的 HTML、一點點的 CSS 跟一點點的 JavaScript，就算完全沒有接觸過網頁開發，我也會希望可以藉由這個系列幫助到大家真的可以完全從不會到會。

Vue3 是一個前端開發者可以學習的框架，在前端框架數量爆炸的現今，除了 Vue3 之外，還有 React 、Next.js 等框架可以來使用。至於為何我選擇 Vue3 來學習，不外乎業界也在用、容易學習、屬於 JS 語法等各種理由，最重要的一個理由就是搭建快速，只要一點點的程式語法，就可以讓網頁動了起來，對於完全不會的人，只要做一點點事情就可以充滿成就感，這個真的是很重要的一件事情。

最後，因為我是使用 MacBook 的一個開發者，所以操作介面都是以 Mac 為主要的操作介面，這點還請各位讀者見諒。

所以不囉唆，首先，第一個單元就是建立專案。

建立專案

任何程式語言的開發第一步，都是建立一個新的專案，在 Vue3 的世界可以使用一個標準工個來建立專案，就是 Vue CLI 工具，這裡是它的官網：https://cli.vuejs.org，讀者可以自行參考。

接下來的步驟，必須使用指令來執行所有命令，所以直接開啟終端機，安裝 Vue CLI：

sudo npm install -g @vue/cli

安裝完成後，確認版本：

vue -V

會出現這一行，說明目前所安裝的版本：

@vue/cli 5.0.8

就表示安裝完成了。

新增專案

接下來就可以使用 vue 命令來新增專案，可以先到你要的目錄下，在這裡我是到桌面上來新增：

cd ~/Desktop

然後直接輸入：

vue create vue-demo

vue create 就表示要新增一個新的專案，然後接上專案的名稱，這邊名稱可以自由命名，我在此命名為 vue-demo。

在新增專案的過程之中，選擇 Vue3 即可：

Vue CLI v5.0.8
? Please pick a preset:
❯ Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

接下來畫面會開始執行安裝的過程，如果新增成功，可以看到這些內容：

...前略...

📄  Generating README.md...

🎉  Successfully created project vue-demo.
👉  Get started with the following commands:

 $ cd vue-demo
 $ npm run serve

恭喜你，專案成功建立。

接下來，要開始執行這個新的專案，直接進入該目錄底下：

cd vue-demo/
npm run serve

就會開始啟動專案，啟動完成會看到以下內容：

App running at:
  - Local:   http://localhost:8081/
  - Network: http://192.168.0.211:8081/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

這個時候直接開啟瀏覽器，在網址輸入：http://localhost:8080/ 即可以看到 Vue3 專案內容，也就是這個畫面：

大功告成。

Vue3 101-1 [完]