HelloWorld專案的搭建詳細步驟請看：Vue安裝搭建點這裡

 首先，最終的介面是有兩個部分組成的，一個是logo圖片、一個是helloworld

大家可能有很多問題：比如我們在HelloWorld 中只寫了helloworld，圖片哪裡來的呢？這兩個怎麼組合在一起的？。。。。

下面我們來了解一下src中其他的檔案，心中疑惑自然會解除：

1.App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>
 

當你看到app.vue的template的時候相信你已經知道圖片是從什麼地方來的了，那麼<router-view/>是什麼呢？不妨猜猜看，相信小夥伴已經猜的七七八八了，繼續看吧。

<script>
export default {
  name: 'App'
}
</script>

script裡面寫了export default 定義了一個name，這個函式的作用就是  定義了其他檔案import這個檔案的時候的名稱，在下面就會看到，別急別急。

css就不用說了吧。

2.main.js

import Vue from 'vue'
import App from './App'
 
import router from './router'

鐺鐺鐺鐺，看沒看到  import  App from './App'   從./App中匯入 App  那麼這個App在哪裡定義的呢，沒錯就是App.vue中的

export default {
  name: 'App'
}

接下來：

Vue.config.productionTip = false

這句程式碼是用來  關閉   生成生產模式的提示

new Vue({
  el: '#app',
router,
components: { App },
template: '<App/>'
})

這段程式碼是重中之重，在這裡建立了Vue的例項，

el是element的縮寫 ‘#app’和常規用法一樣是取得id=app的元素，對應的就是app.vue的div。

router 就是./router下面index.js檔案

components指定了頁面組成的檔案

template是使用的模版

配置好了main.js實際上主頁面就已經成型了，helloworld如何和logo圖片在一起就需要了解下面的router了。

3.index.js（router）

其他程式碼相信大家都能看懂，直奔主題吧：

export default new Router({
  routes: [
    {
      path: '/',
name: 'HelloWorld',
component: HelloWorld
    }
  ]
})

這段程式碼就是實現app.vue和helloworld.vue的template合二為一的關鍵！

在這個路由中，export  default new Router  定義了新路由，

path：‘/’路徑

name:  'HelloWorld' ,定義了路由的名字

component 定義了路由的元件

還記得App.vue中的：

<router-view/>

這句話，就是通過main.js和路由互動，將helloworld植入到了App的template中，然後main.vue展示了App的id='app'的div。

故實現了最終效果！