菜菜菜的 Vue 30天 - Day22

上一篇大致上介紹了如何使用 vue-cli 建立 Vue 專案，這篇就來介紹一下建立起來的專案裡面的架構為何。

架構

這篇我們會以webpack版來做介紹，因為這是最常使用的開發版本，以下是建立的專案架構，如下：

package.json

首先我們先來看 package.json，這支檔案是使用 npm 管理套件會一併出現的檔案，裡面記錄著在這個專案中所使用的套件，以及 npm 的執行指令。

裡面也有看到他預設安裝了 webpack、babel、postcss 還有 vue-loader 或 uglifyjs-webpack-plugin 這些 webpack 的套件。

裡面有一個 script 的地方能夠設定指令，像這個 Vue 的初始專案已經有預設了 3 個指令，執行時使用 npm run 再加上設定的指令：

1. npm run dev，使用 webpack-dev-server 開啟本地端 server
2. npm run start，執行 npm run dev 也就是第一個指令ＸＤＤＤ
3. npm run build，執行專案的打包，打包後會產生一個 dist 資料夾，裡面會是靜態檔案能夠直接部署至雲端 server

在使用 npm install 安裝後伴隨著出現一個 node_modules 的資料夾，裡面就是所有已安裝的套件。

build && config

build && config 資料夾裡面是 webpack 相關的設定檔，這邊就不做太多的介紹，詳細講裡面就離題啦ＸＤＤ

如果想了解 webpack 可以到它的官網看 document，在裡面就能夠了解 entry、output、module、plugin 以及 loader。

src

src 這個資料夾就是我們主要開發的地方了，先來看一下這資料夾裡面有什麼：

main.js && App.vue

我們先來看 main.js 這支檔案，這支就是整個 Vue 專案的最源頭，裡面引入了 Vue 並創建了 Vue 實例，這個 Vue 實例有一個引入的 components: App。

App.vue 它是一個 component，可能有人很疑惑怎麼有 .vue 這個副檔名，因為專案中有使用 webpack 裡面有使用一個套件 vue-loader，有了這個套件 webpack 才能夠將 .vue 檔解析成 js。

App.vue 是整個專案的第一個節點，幫大家回顧一下之前有一個圖：

它就會是圖右方最上面的那個節點。

components

components 這個資料夾就是規劃放置 Vue component 的地方，像初始專案中已經有一個 HelloWorld.vue component。

assets

接下來 assets 的部分，裡面是放置靜態檔案的地方，像是圖片之類的，必須放在這個資料夾內才能夠在程式部分被引用。

router

因為我們執行安裝的時候有選擇要裝 vue-router 所以才會有這個資料夾，那這邊先不多作介紹，後面會有一個章節會詳細介紹 vue-router。

另外有一點上面沒有提到，我們開啟了本地 server 後 vue-cli 有支援 hot reload，所以我們再開發的過程中修改後只要儲存了網頁會自動 reload，我們不需要自己按 f5 或 cmd R 來重整。

Vue-cli 大致上的架構就是這樣，在下一章會詳細介紹 vue-router。