建立專案

方法一. 透過終端機建立專案

上一篇文章我們已經介紹完如何安裝vue cli，接下來就要透過他來建立專案，進而體驗使用vue cli的優點，接下來我們先透過終端機來建立專案資料夾，前往你準備要建立專案資料夾的位置（例如：/User/stanley_ma/workspace），然後輸入「vue create vul-cli」，其中vue-cli是我們準備建立的專案資料夾名稱。

接下來vue會詢問你準備建立專案的預設集，其中有三個選項，第一項是以vue 2為基礎建立的專案資料夾，在我們的範例中當然會選擇第二項以vue 3為基礎來建立，其中還會幫我們另外安裝babel（會幫我們編譯Javascript讓他能支援較舊版本的瀏覽器）與eslint（自動檢測程式碼中是否包含有錯誤的寫法）這兩項套件。

安裝完畢後應該會出現以下的畫面：

方法二. 透過vue ui建立專案

建立vue專案還有一個方法，可以在終端機輸入「vue ui」，此時瀏覽器將會自動被打開，然後會看到Vue 專案管理器，也可以在這個界面中去建立專案，因為是圖形介面所以用起來應該也很容易

可以點選新增的頁籤，瀏覽到想要建立的專案根資料夾之後，按下在此建立專案

隨後輸入專案名稱（會變成專案資料夾的名稱）後按下一步

接下來與純文字介面差不多的就是要選擇預設安裝的項目，同樣我們選擇vue 3這個項目

安裝完畢之後會看到如下的畫面

準備進行網頁編輯

我們挑選Visual Studio Code為我們的專案開發工具，他是一套免費的IDE，大家可以到他的官網免費下載。

下載完畢之後，我們透過軟體開啟剛剛建立的專案資料夾，接下來打開在VS Code中的終端機介面。

在終端機中輸入「npm run serve」，建立本地端的網頁伺服器，接下來我們就可以透過「localhost:8080」來瀏覽我們的網頁了！一開始你應該會看到在建立完vue專案後預設的起始頁。

做到這邊就確定能夠透過VS Code與vue cli來進行開發，但在開發前我們先了解在建立專案之後，vue預設給我們的這些資料夾吧！

• node_modules：專案中需要用到的模組，例如：eslint, babel …等（包含未來找到好用的模組透過npm安裝之後也會在這裡面）。
• public：不需要被vue壓縮的專案檔案，在打包時會自動被複製到目的資料夾中。
• src：專案開發資料夾，基本上專案應該會在這個資料夾中被開發。
• .gitignore：略過版控的檔案清單。
• babel.config.js：babel的設定檔。
• packgae.json：專案的描述檔，包含紀錄安裝了哪些模組…等等。
• packgae-lock.json：紀錄安裝模組的版本。
• README.md：專案的讀我檔。

說到這邊應該會感覺這個專案比我們自己開一個空資料夾進行開發來的複雜許多，但如同前面提到的為了享受vue帶來的便利，這是必須的學習過程，接下來下一篇文章，就準備帶大家來看一下，如何開始進行開發囉！