在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組件中將我們之前學習到的知識運用進來。
比如我們的指令系統：
- v-if 條件渲染
- v-show 顯示隱藏
- v-for 遍歷多條數據
- v-bind 綁定屬性
- v-model 表單控件的數據雙向綁定
- v-on 綁定事件
- v-html 渲染html標簽元素
我們還可以使用實例對象的方法：
- 計算屬性的computed方法來監聽屬性
- methods方法中聲明事件的方法
- .......
---------------------------------------------------
補充：
.vue就是一個組件
webpack + node.js 將我們的項目更加方便化
更有助於開發者的快速開發
創建組件
一個組件有三部分組成
--------------
創建項目：
1. cd 當前目錄下
2. vue init webpack-simple 01
3. 接下來 根據提示操作
4. cd 01
5. npm install
6. npm run dev
7. 只關心src下的文件夾里面的文件
App.vue
1.先引入子組件
2.掛載
<!-- 一個組件有三部分組成 --> <template> <!-- 頁面的結構 --> <div class="app"> <h3>{{msg}}</h3> <p>嘿嘿</p> <Vheader></Vheader> <Vcontent></Vcontent> <Vfooter></Vfooter> </div> </template> <script> //1.先引入子組件 import Vheader from './components/Vheader.vue' import Vcontent from './components/Vcontent' import Vfooter from './components/Vfooter' export default{ name : 'App', data(){ return { msg:"hello 組件" } }, methods:{ }, computed:{ }, // 2.掛載 components:{ Vheader, Vcontent, Vfooter, } } </script> <style> </style>
Vheader.vue
每個樣式想獨立； 加 scoped
<template> <div class="nav"> 我是header <h3>頭</h3> </div> </template> <script> export default{ name:'Vheader', data(){ return { } } } </script> <style scoped> h3{color: red} </style>
Vcontent
<template> <div class="content"> 我是content <h3>內容</h3> </div> </template> <script> export default{ name:'Vcontent', data(){ return { } } } </script> <style scoped> h3{color: green;} </style>