1、定義：實現應用中區域性功能程式碼和資源的集合
模組化：當應用中的js都以模組來編寫的,那這個應用就是一個模組化的應用
元件化：當應用中的功能都是多元件的方式來編寫的,那該應用就是一個元件化應用
2、非單檔案元件
（1）Vue中使用元件的三大步驟
I、定義元件(建立元件)
使用Vue.extend(options)建立，其中options和new Vue(options)時傳入的那個options幾乎一樣，但也有點區別——el不要寫，因為最終所有的元件都要經過一個vm(大哥)的管理，由vm中的el決定服務哪個容器；data必須寫成函式，為了避免元件被複用時，資料存在引用關係。
注意：使用template可以配置元件結構
II、註冊元件
區域性註冊：靠new Vue的時候傳入components選項
全域性註冊：靠Vue.component('元件名',元件)
III、使用元件(寫元件標籤)
（2）幾個注意點
關於元件名
一個單片語成：
第一種寫法(首字母小寫)：school
第二種寫法(首字母大寫)：School
多個單片語成：
第一種寫法(kebab-case命名)：my-school(放在引號中)
第二種寫法(CamelCase命名)：MySchool (需要Vue腳手架支援)
注意：
元件名儘可能迴避HTML中已有的元素名稱，如：h2、H2都不行
可以使用name配置項指定元件在開發者工具中呈現的名字
關於元件標籤
第一種寫法：<school></school>
第二種寫法：<school/>
注意：不用使用腳手架時，<school/>會導致後續元件不能渲染
一個簡寫方式
const school = Vue.extend(options) 可簡寫為：const school = options
（3）元件的巢狀
app元件一人之下(vm之下)，萬人之上(其他所有元件)
（4）關於VueComponent
school元件本質是一個名為VueComponent的建構函式，且不是程式設計師定義的，是Vue.extend生成的
我們只需要寫<school/>或<school></school>，Vue解析時會幫我們建立school元件的例項物件，即Vue幫我們執行的：new VueComponent(options)
特別注意：每次呼叫Vue.extend，返回的都是一個全新的VueComponent！！！！
關於this指向
元件配置中
data函式、methods中的函式、watch中的函式、computed中的函式 它們的this均是【VueComponent例項物件】
new Vue(options)配置中
data函式、methods中的函式、watch中的函式、computed中的函式 它們的this均是【Vue例項物件】——vm
vc與vm
VueComponent的例項物件，以後簡稱vc（也可稱之為：元件例項物件）；Vue的例項物件，以後簡稱vm
（5）一個重要的內建關係
VueComponent.prototype.__proto__ === Vue.prototype——讓元件例項物件（vc）可以訪問到 Vue原型上的屬性、方法
3、單檔案元件—xxx.vue
index,html——main.js——App.vue——xxx.vue