# Vue CLi學習#3 Vue CLi 建置環境完各資料夾用途
###### tags: `Vue cli`

## 環境 -- 調整 git 或是安裝新套件

### package.json -- 有關你的配置環境

### package.json -- 套件版本或是說明

### .eslintrc.js -- ESLint 規則

### .editorconfig -- 編輯器的設定檔

### .browserslistrc -- 瀏覽器預期要支援的版本

### index.html -- Vue 元件掛載所需的網頁實體

## 其他資料夾

### dist -- 執行 npm run build 後所產生的部屬用程式碼的資料夾

---
### node_modules -- 任何延生套件都在這裡
#### 如何還原 node_modules
如果不小心刪除了 node_modules 這個資料夾，怎麼讓它恢復原狀哩
1. 資料夾存在 `package.json` 這個資料夾
2. 如果 `package.json` 存在 ，在終端機上執行 `npm i` ，他就會回復原狀哩

#### 如果沒刪除，為何需要還原 node_modules 呢?
如果把自己的專案丟給別人的話， node_modules 是不會一起給別人的喔
所以還是要進行還原的

---
### src -- 主要的程式碼都放在這裡

#### Main.js
任何外部支援，自己寫的 HTML CSS JS 都會跟這個 Main.js 產生關聯

#### router.js -- 負責讓其他檔案跟 Main.js 產生關聯
如果檔案之間沒有關聯的話，就沒辦法編譯出來
透過 router 將元件等檔案跟 Main.js 產生關聯的話 ， Mainjs就會將關聯的檔案編譯成一個能匯出的獨立檔案，就是我們熟知的 HTML CSS JS

#### .vue 的檔案是什麼
**!! p.s .vue 檔案名稱都以大寫開頭為規則**
同時將 HTML JS CSS 放在一起的檔案
建立:
1. 在 src 的 components 下建立一個 .vue 檔案
2. 檔案命名規則 : 一定要兩個單字連在一起，不能只有一個單字

<template>
    //放html
</template>

<script>
export default {
    //放js
}
</script>

<style lang="sass" scoped>
 //放CSS
</style>