传统 Vue 组件
摘自官网： https://cn.vuejs.org/v2/guide/single-file-components.html
在 Vue 项目中，使用 Vue.component() 来定义全局组件，然后用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。
这种方式适合 中小规模的项目 ，JavaScript 用于将数据渲染到页面上
缺点
在 更复杂的项目 中，或者前端完全由 JavaScript 驱动的时候，会有以下 缺点 ：
- 全局定义(Global definitions)：强制要求每个 component 中的 名字 不能重复
- 字符串模板(String templates)：缺乏语法高亮，没有代码提示
- 不支持CSS (No CSS support) ： 组件中无法定义CSS。可以在外部定义 CSS，但这种方式，没有将 CSS 与 组件封装在一起，这是不好的
- 没有构建步骤(No build step) ：只能 ES5 ，不能使用 ES6 高级语法
解决方法
文件扩展名为 .vue 的 single-file components (单文件组件) 为以上所有问题提供了解决方法，并且还可以使用 webpack 或 Browserify 等构建工具。
更多优点参见官网：
https://cn.vuejs.org/v2/guide/single-file-components.html
.vue 单文件组件
.vue 文件，是 Vue 用于 组件化 开发的 文件格式。
包含了 HTML代码、CSS样式和JavaScript逻辑，将它们组合在一起形成一个 独立的组件。
优点
使用 .vue 文件可以更好地管理和维护代码，提高开发效率。
组件之间保存到独立的 .vue 文件中，互不干扰
组成
由3个部分组成：
template模板，即：
<template></template>标签js代码，即：
<script></script>标签css样式，即：
<style></style>标签
缺点
不能在 HTML 文件中直接使用 .vue 文件，因为浏览器只能识别 .html 、.css、.js 等文件格式，无法识别 .vue 文件格式
提示：使用 http-vue-loader.js，可以在 HTML 文件中引入 .vue 文件，详见 链接
编译
为了解决上面的缺点，即：让浏览器能够正常运行 .vue 文件，需要 编译，将 .vue 文件编译成 js 和 css
单文件工程
为了能够编译，需要创建 Vue 单文件工程
nodejs
为了能够创建 Vue 单文件工程，需要安装 nodejs等软件
.vue 文件命名方式
大驼峰命名方式，类似java的类名，如：
MyBook.vue全小写，如果是多个单词组成，中间由
-组成，如：my-book.vue