iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 14
0
Modern Web

NestJs 讀書筆記系列 第 14

VueJs - 目錄結構

  • 分享至 

  • xImage
  •  
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 等等。


上一篇
VueJs - Vue Apollo , Vuetify 摻在一起
下一篇
VueJs - 與後端 NestJs 對接
系列文
NestJs 讀書筆記31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言