vue-cli3組件的使用

安裝好的vue-cli，可以看到下面的目錄：

assets存放圖片等文件。

components文件夾就類似templates文件夾，存放組件的。

main.js是創建一個vue。

App.vue是一個組件，以.vue結尾的文件都稱為一個組件（html、js、css），組件第一個字幕必須是大寫(因為子組件引入到父組件是以標簽的形式比如：<Vheader></Vheader>，如果V字母是小寫，容易和html的標簽重名)，組建的data必須是一個函數。

App.vue如下：

<template>
  <div id="app">
    <!-- 必須是包裹的標簽 -->
    <h1>{{msg}}</h1>
    <ul v-for="(item,index) in items">
  <li>{{item}}</li>
    </ul>
  </div>
</template>

<script>
export default {  // 拋出
  name: 'App',  // name可有可沒有，指的就是App.vue這個文件
  data(){  // data必須是一個函數
    return {  // 必須ruturn一個對象
            msg: "菜單",
            items: ["宮保雞丁","回鍋肉","糖醋排骨"]
        }
  }
}
</script>

<style>
</style>

結束！