Vue实例是Vue应用的启动器，Vue组件是Vue实例的扩展。
1. Vue实例
通过构造函数可以创建一个Vue的根实例。
SPA应用中，只会创建一个Vue根实例，应用都是通过这个根实例启动的。
实例化 Vue 时，需要传入一个选项对象，它可以包含数据（data），模板（template），挂载元素（el），方法（methods）与生命周期钩子函数（created，mounted...）等选项。下面是一个真实项目中定义的Vue实例：
import Vue from 'vue';
import App from './App.vue'
...
// 激活Vue调试工具vue-devtools
Vue.config.devtools = true;
new Vue({
router, // react-router
store, // vuex
el: '#app', // 需要渲染的DOM节点
render: h => h(App) // //h是createElement 的别名，创建/加载组件
});
2. Vue组件
Vue组件是被扩展的Vue实例，同Vue实例类似，它也需要传入一个选项对象，包含数据，模板，生命周期钩子函数等等。
组件分为局部组件和全局组件。
(1)局部组件
局部组件只能在所定义的Vue实例中使用，格式如下：
//定义<my-component>组件
new Vue({
// ...
components: {
// <my-component> 将只在父模板可用
'my-component': {
template: '<div>A custom component!</div>'
}
}
})
(2)全局组件
第一种方式：利用Vue提供的静态函数component注册：
Vue.component('my-component', {
template: '<div>A custom component!</div>',
//必须是用函数返回数据模型，这样才能让多个组件实例拥有自己的数据模型
data: function () {
return data;
}
})
第二种方式：单文件组件
定义一个后缀为.vue的文件，利用webpack编译处理。
单文件组件的最大优点是，可以将组件相关的HTML，CSS，JS都定义在.vue文件内，默认支持CSS模块化（样式仅在该组件内有效），JavaScript模块化（CommonJs模块）。
参考官网例子：
单文件组件模板.png
注意，<style>有scope属性后，能够将标签内部的CSS选择器自动加上后缀，使其仅应用在此组件内。下图是编译后的组件内联样式：
css module.png
vue文件组件也支持CSS预处理语言，比如scss或者less。如需使用scss，定义lang属性即可：
<style lang="scss" scoped>...</style>
webpack.config中需要加载vue-loader来解析.vue文件（下面配置支持在vue组件中使用scss语法）。
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
}
// other vue-loader options go here
}
},
......
]
},
小结
建议采用单文件组件方式创建Vue项目，这样可以更好的和路由插件配合。
随着项目不断迭代，组件复杂度会随之增加，单文件组件有着更好的可读性和可扩展性，非常适合大中型项目。
更多高阶内容，可移步《小专栏-娜姐聊前端》。
