目標：

1. 將所有套件都安裝完成，成功將 Vue 專案啟動

NestJs 目前先告一個段落，接著會開始講解前端。

這篇章我們就一起來做撒尿牛丸吧！！

Vue.js 是一個用於建立使用者介面的開源JavaScript框架，也是一個建立單頁應用的Web應用框架

Vuetify 基於 Material Design 的 Vue.js UI 元件框架

Vue Apollo 能在 Vue 專案中使用 GraphQL 的套件

安裝

Vue

官方貼心設計，能直接用 Vue CLI 將 TypeScript 引入，所以安裝起來非常簡單

1. 透過 Vue CLI 來建立 Vue 的專案，所以我們先安裝 @vue/cli
   可透過下方任一方式進行安裝，完成後再檢查版本
   根據官方要求 Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推薦 v10 以上)

   $ yarn global add @vue/cli
   # OR
   $ npm install -g @vue/cli
   
   $ vue -V
   @vue/cli 4.2.3
   

2. 使用 @vue/cli 提供的方法來建立 Vue 專案
   我們選擇第二個 Manually select features ，依照自己喜好選擇需要的插件

   $ vue create vue-tutorial
   ? Please pick a preset: (Use arrow keys)
   ❯ default (babel, eslint)
     Manually select features
   

3. 根據需求選擇需要的套件，我這邊只有選擇 Babel

   ? Check the features needed for your project:
   ❯◉ Babel
    ◯ TypeScript
    ◯ Progressive Web App (PWA) Support
    ◯ Router
    ◯ Vuex
    ◯ CSS Pre-processors
    ◯ Linter / Formatter
    ◯ Unit Testing
    ◯ E2E Testing
   

4. 接下來就是根據自己所需，選擇需要的套件以及選項，下面是我最後的結果

   ? Please pick a preset: Manually select features
   ? Check the features needed for your project: Babel
   ? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
   ? Save this as a preset for future projects? No
   

Vue Apollo

進到專案目錄裡面後，開始安裝 Vue Apollo

1. 執行 vue add apollo，然後根據自己專案需求，建立環境

   ? Add example code Yes
   ? Add a GraphQL API Server? No
   ? Configure Apollo Engine? No
   

Vuetify

最後我們要安裝 Vue 的 UI 框架 Vuetify

1. 執行vue add vuetify， 一開始會詢問目前還沒有做 commit ，是否要繼續執行，這邊選擇繼續，然後選擇預設配置，完成安裝

   $ vue add vuetify
   There are uncommited changes in the current repository, it's recommended to commit or stash them first.
   ? Still proceed? Yes
   ? Choose a preset: Default (recommended)
   

啟動服務

在根目錄下指令 yarn serve

接著在瀏覽器輸入 http://localhost:8080/ ，就能看到 vueitfy 建立的 home page

以上我們就完成了在 Vue 專案中加入了 Vuetify 跟 Vue Apollo