###### <p style="text-align: right"> 建立日期：2020-12-18 / 更新日期：2020-12-23</p>

# Vue CLI 2.x版本的資料夾結構

###### tags: `Vue.js` `Vue CLI`

## /build
Webpack 的原始碼
* utils.js：包含 css-loader、postcss-loader 等部分 loader
* webpack.base.conf.js：最主要核心，dev 和 pro 都會 require()這個檔案，裡面可以設定 entry 進入點
* webpack.dev.conf.js：開發環境
* webpack.prod.conf.js：正式環境

## /config
撰寫 Vue 的應用程式時會使用到的設定檔
* dev.env.js：可以增加環境變數，設定開發環境使用的 AJAX 路徑
* 加入：`變數名稱: '"變數的值"'`，單引號、雙引號都要寫！
* 取出：`process.env.變數名稱` 呼叫出來
* index.js：針對整個編譯環境使用
* prod.env.js：可以增加環境變數，設定正式環境使用的 AJAX 路徑

## /dist
執行 `npm run build` 後，編譯後的檔案存放位置，一定要在 HTTP server 下運行

## /node_modules
透過 npm 安裝的相依套件

## /src
* /assets：存放會被編譯的靜態檔案
* 圖檔檔案大小在 Webpack 設定範圍內會被編譯成 base64 的格式，可以減少對伺服器的請求，加快網頁載入速度。設定位置在 webpack.base.conf.js > module > loader: 'url-loader' > options > limit: 限制要轉成 base64 格式的檔案大小最大值，單位為 bytes[^1]
* /components：存放元件
* App.vue：
* main.js：在 Webpack 內設定 main.js 作為 entry 進入點，會 import 許多檔案

## /static
存放不會被編譯的靜態檔案

## .babelrc
打包時用到設定檔，ES6 相關

## .editorconfig
打包時用到設定檔

## .gitignore

## .postcssrc.js
打包時用到設定檔，CSS 相關

## index.html
/src 內的檔案會注入到此檔案，通常較少直接在此檔案內撰寫程式碼
## package.json

## README&#46;md

[^1]: [url-loader limit](https://webpack.js.org/loaders/url-loader/#limit "url-loader")