1. package.json

在執行npm run dev的時候，會在當前目錄中尋找 package.json 檔案, 有點類似 Maven 的 pom.xml 檔案，包含專案的名稱版本、專案依賴等相關資訊。

{　# 版本資訊
  "name": "kitty-ui",
  "version": "1.0.0",
  "description": "kitty ui project",
  "author": "Louis",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },
  "dependencies": { # 專案依賴
    
 
"vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {  # 專案依賴
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1","vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {　　# node、npm版本要求
    
 
"node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

2.webpack.dev.conf.js

從下圖中可以看到， 啟動 npm run dev 命令後，會載入 build/webpack.dev.conf.js 配置並啟動 webpack-dev-server 。

3. config/*.js

webpack.dev.conf.js 中引入了很多模組的內容，其中就包括 config 目錄下伺服器環境的配置檔案。

4. config/index.js

可以看到，在 index.js 檔案中包含伺服器 host 和 port 以及入口檔案的相關配置，預設啟動埠是8080，這裡可以進行修改。

5. index.html

index.html 的內容很簡單，主要是提供一個 div 給 vue 掛載。

6. main.js

main.js 中， 引入了 vue、App 和 router 模組， 建立了一個 Vue 物件，並把 App.vue 模板的內容掛載到 index.html 的 id 為 app 的 div 標籤下， 並綁定了一個路由配置。

7. App.vue

上面 main.js 把 App.vue 模板的內容，放置在了 index.html 的 div 標籤下面。檢視 App.vue 的內容我們看到，這個頁面的內容由一個 logo 和一個待放置內容的 router-view，router-view 的內容將由 router 配置決定。

8. index.js

檢視 route 目錄下的 index.js，我們發現這裡配置了一個路由， 在訪問路徑 / 的時候， 會把 HelloWorld 模板的內容放置到上面的 router-view中。

9. HelloWorld.vue

HelloWorld 中主要是一些 Vue 介紹顯示內容。

10. 頁面組成

所以，頁面關係組成是 index.html 包含 App.vue，App.vue 包含 HelloWorld.vue 。