在webpack-simple模板中，包括webpck模板。一個.vue文件就是一個組件。

為什麽會這樣呢？因為webpack幹活了！webpack的將我們所有的資源文件進行打包。同時webpack還能將我們的html（template）、css、js文件通過模板編譯的方式將這些文件打包成一個.vue的文件。

為什麽在vue-cli項目中能使用.vue的文件？

比如有這之前的一個自定義的組件：

 Vue.component(‘app-header‘, {
        template: ‘<div>A custom component!</div>‘
    })
 

我們可以把template提取出來，例如：

<script type="text/x-template" id="head-template">
  <div class="head">
    <h1>{{ title }}</h1>
  </div>
</script>

Vue.component(‘app-header‘, {
    template: ‘#head-template‘,
    data: {
        title: ‘我是頭部‘
    }
})

如果是這樣的去寫我們的組件的話，太復雜了，後期還不好去維護。可能大家現在還感覺不出來，如果寫更多功能或者用到組件時會相互嵌套，那就更加的麻煩了。還好官方推出的vue-cli工具，基本不用任何的額外的代碼，很快的就可以構建出一套完整的環境。

<template>
  <div class="header">
    <h1> {{ title }} </h1>
  </div>
</template>

<script>
  export defualt {
    data: function() {
      return {
        title: ‘我是頭部‘
      }
    }
  }
</script>

<style>
  .header {
    color: red;
  }
</style
 
>

上面代碼 有三部分，template標簽中就是我們要寫的組件結構，script標簽中就是我們要寫的業務邏輯，style標簽中就是我們要寫的該組件的樣式。這三部分，我們通過vue-loader這個插件，將這三部分共同組合成了一個.vue文件。我們稱這種.vue的文件就是一個組件。

另外上面的代碼，我們發現有個export default語法，其實呢，這個東西，跟我們的python模塊化有點類似。在es6 Module中，webpack這個工具通過babel-loader這個loader將我們的es6 Module語法進行解析，從而讓我們的export default語法和import ‘xxx‘語法在瀏覽器中識別。

我們總結一句話：export default xxx 就是拋出一個模塊（一個js文件就是一個模塊)， import ‘xxx‘ from ‘aaa‘就是從剛剛拋出的文件路徑中，導入此模塊。有import就一定有export default.

接下來我們我編輯器中打開我們的項目目錄，查看一下結構：

打開src文件夾，我們先從項目的入口文件main.js文件：

那麽接下來我們就關心去書寫App.vue組件中定義的內容就可以了。

大家一開始學習呢，先將App.vue文件中的內容全部刪掉，跟著我一起書寫裏面的主要內容。

在該組件中，我們可以書寫三部分，就是之前咱們學習的HTML、CSS、JS.

<template>
  <!-- 該組件的模板結構（HTML） -->
</template>
<script>
  // 該組件的DOM操作
</script>
<style>
/*該組件的樣式屬性*/
  
</style>

因為在main.js中有：

import App from ‘./App.vue‘

所以，我們必須在當前組件中寫入export default,那麽後面的書寫就是用到了咱們之前的學習的語法。

在script中如下：

export default {
    name:‘App‘,
    data(){
      return {
        //必須是一個函數，要有返回值，返回空對象也是有返回值
      }
    }
  }

在template中

<!--一定是閉合標簽-->
<div class="app"> 
      <h3>{{ msg }}</h3>
</div>

如果此時你的命令行工具還是保持開啟的裝備的，那麽你會發現如下頁面：

如果沒有重啟項目，請再次執行如下命令啟動項目：

npm run dev

那麽接下來我們就可以在App.vue組件中將我們之前學習到的知識運用進來。

比如我們的指令系統：

1. v-if 條件渲染
2. v-show 顯示隱藏
3. v-for 遍歷多條數據
4. v-bind 綁定屬性
5. v-model 表單控件的數據雙向綁定
6. v-on 綁定事件
7. v-html 渲染html標簽元素

我們還可以使用實例對象的方法：

1. 計算屬性的computed方法來監聽屬性
2. methods方法中聲明事件的方法
3. .......

vue-cli腳手架項目中組件的使用