轉載：https://blog.csdn.net/yudiandemingzi/article/details/80247137
怎么結合的：
一、啟動項目
第一步：cmd進入項目文件里，運行npm run dev 啟動項目 這里說明啟動端口號是8080
第二步：往頁面輸入：localhost:8080
二、解析渲染步驟
先看整體框架樣式和index.html：
從上面我們可以看出，index的body中只有一個id為app的div，那是如何被渲染的呢。一步一步尋找
第一步：main.js
main.js是我們的入口文件，主要作用是初始化vue實例並使用需要的插件。
mian.js 的內容如上圖。
這里new Vue代表新建vue對象
el官方解釋：為實例提供掛載元素。值可以是 CSS 選擇符，或實際 HTML 元素，或返回 HTML 元素的函數。
這里就通過index.html中的<div id="app"><div>中的id=“app”和這里的“#app”進行掛載。
components:代表組件。這里的App，實際是App:App的省略寫法，template里使用的 <App/>標簽來自組件App。
template：代表模板。官方解釋：模板將會替換掛載的元素。掛載元素的內容都將被忽略。
也就是說:template: '<App/>' 表示用<app></app>替換index.html里面的<div id="app"></div>
那到底是不是這樣，我們先把main中components這行注釋掉：
再看頁面：發現里面就有一個<app></app>標簽。這樣那么邏輯就通了。
這樣mian.js就通了，那通過components: { App },我們來看App.vue。
還要重點說明index.js，在main.js中new Vue對象中寫入router，實際上是router:router，作用是main.js引入了router對象，根據路由的配置方法，需要將router對象加載到根main..js中。
第二步：App.vue
helloworld.vue中的內容能在app.vue中顯示, 首先在index.js配置了路由路徑,在main.js中加載了路由,在app.vue指明了路由顯示位置<router-view>標簽.
<router-view>怎么作用到一個helloworld組件的,作用域是什么,跨文件了怎么弄的? 還有待學習.
轉載:https://blog.csdn.net/for_weber/article/details/80414754
打包中的坑：
Vue項目運行npm run build后會生成一個dist文件夾，我們一般都是把這個文件夾部署到服務器上。dist文件夾里邊有一個static文件和一個index.html頁面，這個index就是最后單頁面的最終文件。
問題一：我在打包完成后，打開index.html文件發現地址並沒有攜帶路由。
這樣的話頁面就是空白了，因為沒有組件被添加到頁面中。打開F12會看到一堆的紅色failed請求。打開請求地址是這樣的。
進入D盤就開始尋找static文件夾當然是找不到的。既然知道了是打包之后尋找文件的地址錯誤，就去config文件夾下的index.js中尋找問題。index.js中的build命令的配置有一個屬性叫assetsPublicPath，它的值為‘/’。意思是根目錄，這時會從index.html所在的硬盤的根目錄下開始查找，自然無法找到。解決辦法：
改為‘./’這時就不再是絕對路徑的根目錄了，而是改為了相對路徑，同目錄下進行查找。再次打包，頁面基本正常。
問題二：我再次打包后，頁面可以正常打開。但是頁面上的一些圖片請求失敗。
我這里請求失敗的都是背景圖片，而且只是某一些失敗。我一直有一個疑惑就是為什么同一個css文件中的背景圖片請求有的成功有的失敗，要知道我的圖片都是放在同一個文件夾下邊的。目前這個疑惑還沒有解決。
打開某一個失敗的請求，我們會發現請求的路徑是這樣的。
也就是說這個css文件是從當前文件夾下往里尋找static/img/XXX.png，要知道static文件夾是在dist根目錄下邊的，因此，我們需要修改build的全局配置，改變css文件的文件請求路徑。css文件在static里邊的css文件夾中，因此需要先‘../../’出到dist根目錄下，然后再static/img/XXX.png，就可以正確找到對應的圖片文件。
解決辦法：
修改build文件夾下邊的utils.js文件。
再文件相同的if語句下添加下圖中選中的代碼。
重新打包，即可解決圖片找不到的問題。