root
 ├── src
 │    ├── assets
 │    ├── components
 │    ├── graphql
 │    ├── plugins
 │    ├── App.vue
 │    ├── main.ts
 │    └── vue-apollo.ts
 │
 ├── apollo.config.js
 ├── tsconfig.json
 └── vue.config

有建立過 Vue 專案的讀者對這個結構應該不太陌生
但又有幾個部分不太熟悉
接下來我會針對這些目錄結構做詳細的介紹

apollo.config.js

Vue Apollo 的配置檔，基本上不太需要做改動

vue.config

關於 Vue 檔案路徑， Compiler ，CSS 等相關配置都是來這裡設定
更詳細介紹可以參考官網，中文的，很好理解 :100:

src

• assets - 靜態資源
• components - vue 元件。
  一開始會有兩個檔案 ApolloExample.vue, HelloWorld.vue 。
  前者是 Vue Apollo 的範例，裡面有 Call API 的完整範例，後續我也會再做詳細的介紹。
  後者是 Vuetify 的範例，主要是如何使用 Vuetify 的 component，這邊我就不在多做說明，跟大部分的 UI 框架差不多，更多元件就請讀者到官方做參考，官網提供的範例說明都蠻清楚的。
• graphql - gql 檔案，在安裝 Vue Apollo 的時候有詢問是否新增 example code ，如果是 yes 就會有這個檔案。對於第一次接觸的讀者，可以先參考範例。
• plugins - 目前有一個 vuetify.ts ，後續要對 vuetify 做一些修改可以來這邊做設定。
  例如: 我們想把主題改為黑色系， Vuetify 提供 theme 屬性，可以改變想要的主題色系，只要按照下面範例新增 theme 屬性即可。

  export default new Vuetify({
      theme: {
          dark: true
      }
  });
  

• App.vue - 主元件，頁面的入口點
• main.ts - 程式的入口點
• vue-apollo.ts - Create Apollo Client 的主程式，由 main.ts 引入到應用程式中。
  對於 Http endpoint, ssr, cache, subscriptions... 等等配置都在這邊修改，因為屬性過多，這邊就不一一做說明。

以上就是基本的目錄結構介紹，之後在實作過程中還是會繼續增加一些檔案，像是 Vue Router, Vuex 的 Store, 或是 Vue Apollo cache 等等。