.vue 單文件組件， 在一個文件中封裝一個頁面需要用到的html, css , js 。 ## 全局組件 在JS代碼中可以使用Vue.component方式定義組件，使用new Vue({ el: '#my-container '}) 指定容器元素，在id 是my-container的Div中就可以使用該組件了，類似： JS代碼 ``` Vue.component('button-counter', { data: function() { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' }); new Vue({ el: '#components-demo' }); ``` HTML代碼 ``` <div id="components-demo"> <button-counter> </button-counter> </div> ``` 在線演示地址： https://jsrun.net/CLfKp/edit 這樣的方式定義的組件屬于全局的組件，在中小規模項目中可能還好，但是在大型和復雜的項目中，存在以下缺點： * 全局定義要求組件的命名不能重復 * 字符串模板缺乏語法高亮，閱讀困難 * 不支持CSS。 * 沒有構建步驟，只能使用HTML和ES5 Javascript，不能使用預處理器。 于是，就出現了Single-file components , 單文件組件，即在一個文件中定義一個組件， 這個文件的擴展名是 .vue。 ## 單文件組件的文件結構 文件的結構： ``` <template></template> <script></script> <style></style> ``` 1. `<template>` 標簽里面放字符串的模板 2. `<script>` 寫JavaScript代碼 3. `<style>` CSS樣式代碼, `<style scoped></style>` 樣式在當前頁有效 ## vue-loader Vue的加載器， 對.vue 文件進行加載、解析。 vue-loader 是基于webpack的。