?VUE啟動(dòng)流程

1. package.json

在執(zhí)行npm run dev的時(shí)候，會(huì)在當(dāng)前目錄中尋找 package.json 文件, 有點(diǎn)類似 Maven 的 pom.xml 文件，包含項(xiàng)目的名稱版本、項(xiàng)目依賴等相關(guān)信息。

{　# 版本信息"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": { # 項(xiàng)目依賴"vue": "^2.5.2","vue-router": "^3.0.1"},"devDependencies": { # 項(xiàng)目依賴"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

從下圖中可以看到， 啟動(dòng) npm run dev 命令后，會(huì)加載 build/webpack.dev.conf.js 配置并啟動(dòng) webpack-dev-server 。

3.? config/*.js

?webpack.dev.conf.js 中引入了很多模塊的內(nèi)容，其中就包括 config 目錄下服務(wù)器環(huán)境的配置文件。

4.? config/index.js

可以看到，在 index.js 文件中包含服務(wù)器 host 和 port 以及入口文件的相關(guān)配置，默認(rèn)啟動(dòng)端口是8080，這里可以進(jìn)行修改。

?

5.? index.html

index.html 的內(nèi)容很簡(jiǎn)單，主要是提供一個(gè) div 給 vue 掛載。

6.? main.js

main.js 中， 引入了 vue、App 和 router 模塊， 創(chuàng)建了一個(gè) Vue 對(duì)象，并把 App.vue 模板的內(nèi)容掛載到 index.html 的 id 為 app 的 div 標(biāo)簽下， 并綁定了一個(gè)路由配置。

7.? App.vue

上面 main.js 把 App.vue 模板的內(nèi)容，放置在了 index.html 的 div 標(biāo)簽下面。查看 App.vue 的內(nèi)容我們看到，這個(gè)頁(yè)面的內(nèi)容由一個(gè) logo 和一個(gè)待放置內(nèi)容的 router-view，router-view 的內(nèi)容將由 router 配置決定。

?

8.? index.js

查看 route 目錄下的 index.js，我們發(fā)現(xiàn)這里配置了一個(gè)路由， 在訪問(wèn)路徑 / 的時(shí)候， 會(huì)把 HelloWorld 模板的內(nèi)容放置到上面的 router-view中。?

9.? HelloWorld.vue

HelloWorld 中主要是一些 Vue 介紹顯示內(nèi)容。

?

10. 頁(yè)面組成

所以，頁(yè)面關(guān)系組成是 index.html 包含 App.vue，App.vue 包含 HelloWorld.vue 。

?

?

---

作者：朝雨憶輕塵
出處：https://www.cnblogs.com/xifengxiaoma/?
版權(quán)所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明原文作者及出處。

轉(zhuǎn)載于:https://www.cnblogs.com/xifengxiaoma/p/9493544.html

總結(jié)

以上是生活随笔為你收集整理的Vue笔记：webpack项目vue启动流程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。