---
# System prepended metadata

title: 專案架構

---

# 專案架構

## 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** 命名規則。<br>(例：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** 命名規則。<br>(例：authLayout.ts) |
| [middleware](https://zh.nuxtjs.org/guide/routing#%E4%B8%AD%E9%97%B4%E4%BB%B6) | 定義在頁面跳轉前要執行的方法。 | 檔名使用 **小駝峰 camelCase** 命名規則。<br>(例：authMiddleware.ts) |
| [modules]((https://zh.nuxtjs.org/guide/modules/)) | 擴展 Nuxt 功能的套件。| module 需個別寫在包含 index.ts 的資料夾內，資料夾使用 **kebab-case** 命名規則。<br>(例 google-auth/index.ts) |
| node_modules | 專案所需的 node 套件會安裝在此資料夾。 | - |
| [pages](https://zh.nuxtjs.org/guide/views#%E9%A1%B5%E9%9D%A2) | 依照路由所對應的頁面，只屬於該頁面的組件請寫在該頁面的 components 資料夾內。<br><br>註: \*/components/\* 內的 .vue 檔不會被註冊到 router 內 | 依照專案 router 名稱命名。 |
| [plugins](https://zh.nuxtjs.org/guide/plugins) | 在運行 vue.js 應用前需執行的 js 套件。 | plugin 需個別寫在包含 index.ts 的資料夾內，資料夾使用 **kebab-case** 命名規則。<br>(例：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** 命名規則。<br>(例：userModule.ts) |
utils | 專案共用 functions。 | 依照功能建立個別資料夾，資料夾內需有 index.ts 匯出 functions，資料夾使用 **小駝峰 camelCase** 命名規則。<br>(例：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)




