整個專案是一個主檔案index.html，index.html中會引入src資料夾中的main.js，main.js中會匯入頂級單檔案元件App.vue，App.vue中會通過元件巢狀或者路由來引用其他頁面元件檔案，頁面元件也可以巢狀或者路由引用的方式載入子元件。

元件有兩種：指令碼化元件、單檔案元件

指令碼化元件的缺點：

html程式碼是作為js的字串進行編寫，所以組裝和開發的時候不易理解，而且沒有高亮效果。
指令碼化元件用在小專案中非常合適，但是複雜的大專案中，如果把更多的元件放在html檔案中，那麼維護成本就會變得非常昂貴。
指令碼化元件只是整合了js和html，但是css程式碼被剝離出去了。使用元件時還要另外引入css檔案。

將一個元件相關的html結構，css樣式，以及互動的JavaScript程式碼從html檔案中剝離出來，合成一個檔案，這種檔案就是單檔案元件，相當於一個元件具有了結構、表現和行為的完整功能，方便元件之間隨意組合以及元件的重用，這種檔案的副檔名為“.vue”，比如：“Home.vue”。

在template 編寫html程式碼，script編寫vue.js程式碼，style編寫當前元件的樣式程式碼
從上面可以看到，雖然我們現在使用了單檔案元件，但是之前我們在指令碼化階段學習過的所有語法，在這裡都是通用的。

構建一個元件：

在src/components目錄下,可以建立當前頁面的子元件,例如Nav.vue

<template>
  <div>
    <ul>
      <li v-for="menu in menu_list"><a :href="menu.link">{{ menu.name }}</a></li>
      <li>
         <span>所在地：</span><select name="" id="">
        <option value="">北京</option>
        <option value="">上海</option>
        <option value="">深圳</option>
      </select>
      </li>
    </ul>

  </div>
</template>

<script>
export default {
  name: "Nav",
  data() {
    return {
      menu_list: [
        {name: "百度", "link": "http://www.baidu.com"},
        {name: "騰訊", "link": "http://www.qq.com"},
        {name: "小米", "link": "http://www.xiaomi.com"},
      ],
     city:"北京",
    }
  },

}
</script>

<style scoped>
ul, li {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul::after {
  overflow: hidden;
  clear: both;
  display: block;
  content: "";
}

li {
  float: left;
  margin: 0 20px;
}

a {
  text-decoration: none;
  color: #666;
}
</style>

接下來就可以在Home.vue中通過import匯入Nav進行巢狀使用。

<template>
  <div class="home">
<!--    <img alt="Vue logo" src="../assets/logo.png">-->
<!--    <HelloWorld msg="Welcome to Your Vue.js App"/>-->
    <Nav></Nav>
  </div>
</template>

<script>
// @ is an alias to /src
import Nav from '@/components/Nav.vue'

export default {
  name: 'Home',
  components: {
    Nav
  }
}
</script>