專案架構 - HackMD

# 專案架構 ## 1. 專案連結 [gitlab](https://gitlab.com/paul.chen1/nuxt-template) ## 2. 架構說明 **資料夾** | 名稱及連結 | 說明 | 編寫規範 | | ----- | --- | --- | | .nuxt | 執行 npm run build 後產生的編譯檔，執行 npm run start 會啟動 node server。 | - | | .vscode | 統一開發人員的 VSCode 設定檔與專案必裝或必關的套件。| - | | [assets](https://zh.nuxtjs.org/guide/assets) | 要用 Webpack 編譯的資源文件。 | - | | [components](https://zh.nuxtjs.org/guide/directory-structure/#%E7%BB%84%E4%BB%B6%E7%9B%AE%E5%BD%95) | 頁面會使用的通用組件，如果是只屬於特定頁面的組件，請寫在 pages 內該頁面的 components 資料夾內。 | 組件需個別寫在包含 index.vue 的資料夾內，資料夾命名需至少 2 個單字以上且使用 **大駝峰 PascalCase** 命名規則。 (例：MyComponent/index.vue) | | node_modules | 專案所需的 node 套件會安裝在此資料夾。 | - | | db | json-server 設定檔。([官網](https://github.com/typicode/json-server)) | - | | [layouts](https://zh.nuxtjs.org/guide/views#%E5%B8%83%E5%B1%80) | 頁面佈局檔。 | 檔名使用 **小駝峰 camelCase** 命名規則。 (例：authLayout.ts) | | [middleware](https://zh.nuxtjs.org/guide/routing#%E4%B8%AD%E9%97%B4%E4%BB%B6) | 定義在頁面跳轉前要執行的方法。 | 檔名使用 **小駝峰 camelCase** 命名規則。 (例：authMiddleware.ts) | | [modules]((https://zh.nuxtjs.org/guide/modules/)) | 擴展 Nuxt 功能的套件。| module 需個別寫在包含 index.ts 的資料夾內，資料夾使用 **kebab-case** 命名規則。 (例 google-auth/index.ts) | | node_modules | 專案所需的 node 套件會安裝在此資料夾。 | - | | [pages](https://zh.nuxtjs.org/guide/views#%E9%A1%B5%E9%9D%A2) | 依照路由所對應的頁面，只屬於該頁面的組件請寫在該頁面的 components 資料夾內。 註: \*/components/\* 內的 .vue 檔不會被註冊到 router 內 | 依照專案 router 名稱命名。 | | [plugins](https://zh.nuxtjs.org/guide/plugins) | 在運行 vue.js 應用前需執行的 js 套件。 | plugin 需個別寫在包含 index.ts 的資料夾內，資料夾使用 **kebab-case** 命名規則。 (例：axios-plugin/index.ts) | | services | [Axios](https://github.com/axios/axios) 與 API 設定，使用，[Axios Module](https://axios.nuxtjs.org/)。 | - | | [static](https://zh.nuxtjs.org/guide/assets#%E9%9D%99%E6%80%81%E6%96%87%E4%BB%B6) | 不會被 webpack 編譯的靜態資源。 | - | | [store](https://zh.nuxtjs.org/guide/vuex-store/) | Vuex 資料夾，使用 [vuex-module-decorators](https://github.com/championswimmer/vuex-module-decorators)。 | 檔名使用 **小駝峰 camelCase** 命名規則。 (例：userModule.ts) | utils | 專案共用 functions。 | 依照功能建立個別資料夾，資料夾內需有 index.ts 匯出 functions，資料夾使用 **小駝峰 camelCase** 命名規則。 (例：stringUtils/index.ts) **檔案** | 名稱 | 說明 | 連結 | | --- | ---- | --- | | .babelrc | Babel 設定檔。 | | .editorconfig | EditorConfig 設定檔。 | [官網](https://editorconfig.org/) | .env | 環境變量設定檔，此檔案不做版本控制。 | | .env.example | 環境變量設定預設檔，專案 clone 下來後，**將此檔案複製一份新的並重新命名成 .env**，在 .env 哪設定環境變量。 | | .eslintrc | Eslint 設定檔。 | [說明](https://eslint.org/docs/user-guide/configuring) | .gitignore | git 不追蹤檔案設定檔。 | [說明](https://git-scm.com/docs/gitignore) | .prettierrc | Prettier 設定檔。 | [說明](https://prettier.io/docs/en/options.html) | jest.config.js | 單元測試 Jest 設定檔。 | [說明](https://jestjs.io/docs/en/configuration) | jsconfig.json | VSCode javascript 設定檔。 | [說明](https://code.visualstudio.com/docs/languages/jsconfig) | nuxt.config.ts | nuxt 專案設定檔。 | [說明](https://zh.nuxtjs.org/guide/configuration) | package-lock.json | 專案依賴包版本紀錄檔 | [說明](https://docs.npmjs.com/configuring-npm/package-lock-json.html) | package.json | 專案資訊。 | [說明](https://docs.npmjs.com/files/package.json) | README | 專案說明。 | | stylelint.config.js | stylelint 設定檔。 | [說明](https://stylelint.io/user-guide/configure) | tsconfig.json | typescript 設定檔。 | [說明](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)