.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的。