Vue項(xiàng)目結(jié)構(gòu)如下：
重點(diǎn)在src文件夾：
assets——靜態(tài)資源，如css，js
components——公共組件
router——路由文件
App.vue——根組件
main.js——入口文件
1.index.html
index.html如其他html一樣，但一般只定義一個(gè)空的根節(jié)點(diǎn)，在main.js里面定義的實(shí)例將掛載在根節(jié)點(diǎn)下，內(nèi)容都通過(guò)vue組件來(lái)填充。
2.App.vue
一個(gè)vue頁(yè)面通常由三部分組成:模板(template)、js(script)、樣式(style)
1) template
其中模板只能包含一個(gè)父節(jié)點(diǎn)，<router-view/>為<router-view></router-view>的簡(jiǎn)寫(xiě)，是子路由視圖，后面的路由頁(yè)面都顯示在此處。
2) script
vue通常用es6來(lái)寫(xiě)，用export default導(dǎo)出，其下面可以包含數(shù)據(jù)data，生命周期(mounted等)，方法(methods)等。
3) style
樣式通過(guò)style標(biāo)簽<style></style>包裹，默認(rèn)是影響全局的，如需定義作用域只在該組件下起作用，需在標(biāo)簽上加scoped，<style scoped></style>
3.main.js
main.js主要是引入vue框架，根組件及路由設(shè)置，并且定義vue實(shí)例。
第9行的router相當(dāng)于router:router，為ES6寫(xiě)法，在對(duì)象中，如果鍵值對(duì)一樣的話，可以簡(jiǎn)寫(xiě)為一個(gè)；
components: { App }引入根組件App.vue，App即App:App；
template: '<App/>' 是簡(jiǎn)寫(xiě)形式，等價(jià)于 <App></App>。
4.router
router下的index.js文件中的routes定義了路徑為'/'的路由，該路由對(duì)應(yīng)的頁(yè)面是HelloWorld組件。
整個(gè)頁(yè)面渲染過(guò)程：
訪問(wèn)http://localhost:8080/顯示的就是index.html頁(yè)面，index.html原本只有一個(gè)根結(jié)點(diǎn)id="app"。
main.js入口文件引入根組件App。
前邊已說(shuō)過(guò)，根組件App中，<router-view/>是子路由視圖，后面的路由頁(yè)面都顯示在此處，訪問(wèn)http://localhost:8080/，路由為‘/’，根據(jù)路由文件index.js，所以引入HelloWorld組件。
main.js中的template: '<App/>'在html頁(yè)面中添加<App></App>模板，模板內(nèi)容即為HelloWorld組件內(nèi)容。
最后渲染出的html結(jié)構(gòu)如下：
瀏覽器中F12用vue-devtools查看：
