---
# System prepended metadata

title: Vue 環境中的檔案說明 (6-2)
tags: [6. VueCli, Vue]

---

# Vue 環境中的檔案說明 (6-2)
###### tags: `Vue`、`6. VueCli`
2022.3.10

![](https://i.imgur.com/RV5MpRW.png)

#### dist 資料夾 : 操作 `npm run build` 後自動生成此檔案，這是主要給網頁讀的檔案。
#### node_module 資料夾 : 存放所有安裝的套件。
#### public 資料夾 : 存放不太需要編譯的檔案 (除了index.html)。
#### src 資料夾 : 主要網頁檔案都會存放於此。
#### .browserslistrc : 瀏覽器預期資源版本，>1% 表示只要瀏覽器有大於 1% 的使用人數，此程式就會資源。
#### .editorconfig : 編輯器的設定檔。
#### eslintrc.js : 撰寫模式審核規則 (如：airbnb)。
#### .gitignore : git忽略的檔案，在git上傳檔上時，會自動忽略此檔有標記的檔案 (node_modules若要上傳git必須忽略)。
#### babel.config.js : babel設定 (依照預設，基本上不太會動)。
#### package-lock.json : 套件版本號 (只用來檢視版本號，基本上不太會動)。
#### package.json : 專案套件配置檔案，顯示本專案有下載那些套件 (serve、build、lint，可以直接在這裡點擊運行)。
#### README.md : VueCli操作指令說明檔。


---


## src 資料夾
![](https://i.imgur.com/TwN4Jfk.png)

#### assets：相關其他資產，(如：log圖片、json檔案)
#### components 資料夾 : 存放元件。
#### router 資料夾：存放router設定檔。
#### views 資料夾 : 次要頁面，在它底下能串接不同元件。
#### App.vue : 主要頁面(如:nva bar)，在它底下會串接不同頁面。
#### main.js : 最重要，所有專案的進入點(路由、元件...都匯集於此)。

## public 資料夾
![](https://i.imgur.com/5AwUv6C.png)

#### index.html：主要html網頁，App.vue最終會掛載於此，欲新增套件CDN也可以加在此。
