Vue項目啟動代碼執行流程分析

 VUE啟動流程

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 。

 

 

---

作者：朝雨憶輕塵
出處：https://www.cnblogs.com/xifengxiaoma/ 
版權所有，歡迎轉載，轉載請注明原文作者及出處。