前言：開始出來實習了，雖然一直在做後端，但是項目組目前需要做前端，所以重新開始學vue，這裏我參考https://zhuanlan.zhihu.com/p/50339730
https://www.jianshu.com/p/d1083240c90a
搭建了Vue項目，但是對項目具體怎麼跑起來的仍有疑惑，所以從網上查閱資料進行學習。
參考博客：https://www.cnblogs.com/zeroes/p/vue-run-dev.html#commentform
https://carsonwah.github.io/15213187968464.html
目錄
第一章 npm run dev
npm run XXX是執行配置在package.json中的腳本，比如：
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
},
這裏就是執行了 webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
第二章 main.js和index.html
build/webpack.dev.conf.js調用了build文件夾裏的webpack.dev.conf.js文件
在webpack.dev.conf.js中又通過merge引用了webpack.base.conf.js文件。
在webpack.base.conf.js文件中調用了./src/main.js，表示要將main.js進行打包，打包後輸出到dist中。
在main.js中實例化了一個id=app的Vue實例，並引入了組件App。
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* main.js */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
再次回到webpack.dev.conf.js文件的結尾處，表示會將index.html作爲輸出文件的模板文件
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
總的來說就是要將main.js引入到index.html中。
main.js中的 el: '#app'對應着index.html中的id=app，表示new的Vue要控制的是id=app中的區域。
template表示要用app組件替換index.html中的id=app的元素。
舉個例子
如main.js爲：
import Vue from 'vue'
import AppComponet from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#myapp',
router,
components: { AppComponet },
template: '<AppComponet/>'
})
index.html爲：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue-learn</title>
</head>
<body>
<div id="myapp">
hshshs
</div>
<!-- built files will be auto injected -->
</body>
</html>
app組件爲：
<template>
<div id="zhangsan">
hshsh
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
app組件將替換id=app這個元素，最終表示爲如下：
app組件替換了<div id="myapp">hshshs</div>
第三章 router-view
可以看到app組件中，有一個<router-view/>，個人理解（不一定對），當main.js注入index.html後，路由檢測到地址匹配路由中的/路徑
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
於是便用helloworld組件替換掉了<router-view/>元素。