Vue項目結構如下：

項目結構

重點在src文件夾：

assets——靜態(tài)資源，如css，js

components——公共組件

router——路由文件

App.vue——根組件

main.js——入口文件

1.index.html

index.html如其他html一樣，但一般只定義一個空的根節(jié)點，在main.js里面定義的實例將掛載在根節(jié)點下，內容都通過vue組件來填充。

index.html

2.App.vue

一個vue頁面通常由三部分組成:模板(template)、js(script)、樣式(style)

1) template

其中模板只能包含一個父節(jié)點，<router-view/>為<router-view></router-view>的簡寫，是子路由視圖，后面的路由頁面都顯示在此處。

2) script

vue通常用es6來寫，用export default導出，其下面可以包含數(shù)據(jù)data，生命周期(mounted等)，方法(methods)等。

3) style

樣式通過style標簽<style></style>包裹，默認是影響全局的，如需定義作用域只在該組件下起作用，需在標簽上加scoped，<style scoped></style>

App.vue

3.main.js

main.js主要是引入vue框架，根組件及路由設置，并且定義vue實例。

main.js

第9行的router相當于router:router，為ES6寫法，在對象中，如果鍵值對一樣的話，可以簡寫為一個；

components: { App }引入根組件App.vue，App即App:App；

template: '<App/>' 是簡寫形式，等價于 <App></App>。

4.router

router下的index.js文件中的routes定義了路徑為'/'的路由，該路由對應的頁面是HelloWorld組件。

router

整個頁面渲染過程：

訪問http://localhost:8080/顯示的就是index.html頁面，index.html原本只有一個根結點id="app"。

index.html

main.js入口文件引入根組件App。

main.js

前邊已說過，根組件App中，<router-view/>是子路由視圖，后面的路由頁面都顯示在此處，訪問http://localhost:8080/，路由為‘/’，根據(jù)路由文件index.js，所以引入HelloWorld組件。

main.js中的template: '<App/>'在html頁面中添加<App></App>模板，模板內容即為HelloWorld組件內容。

App.vue

router

HelloWorld.vue

最后渲染出的html結構如下：

html結構

瀏覽器中F12用vue-devtools查看：