在生成、導出、導入、使用 Vue 組件的時候，有些新手就會常常被位於不同文件的 new Vue() 和 export default{} 搞得暈頭轉向。它們含義到底是什么，又有什么異同呢？
首先，Vue 是什么？ 我的理解是 Vue 就是一個構造函數，生成的實例是一個巨大的對象，可以包含數據、模板、掛載元素、方法、生命周期鈎子等選項。
所以渲染的時候，可以使用構造 Vue 實例的方式來渲染相應的 html 頁面：
new Vue({ el: '#app' ... })
那么 export default {} 又是來干嘛的？
這是在復用組件的時候用到的。假設我們寫了一個單頁面組件 A 文件，而在另一個文件 B 里面需要用到它，那么就要用 ES6 的 import/export 語法 ，在文件 A 中定義輸出接口 export **，在文件 B 中引入 import **，然后再生成一個 Vue 實例 new Vue (**)，把引入的組件用起來，這樣就可以復用組件 A 去配合文件 B 生成 html 頁面了。
所以在復用組件的時候，export 和 new Vue 缺一不可。
======================================================================
export 用來導出模塊，Vue 的單文件組件通常需要導出一個對象，這個對象是 Vue 實例的選項對象，以便於在其它地方可以使用 import 引入。而 new Vue() 相當於一個構造函數，在入口文件 main.js 構造根組件的同時，如果根組件還包含其它子組件，那么 Vue 會通過引入的選項對象構造其對應的 Vue 實例，最終形成一棵組件樹。
export 和export default 的區別在於：export 可以導出多個命名模塊，例如：
//demo1.js
export const str = 'hello world'
export function f(a){
return a+1
}
對應的引入方式：
//demo2.js
import { str, f } from 'demo1'
export default 只能導出一個默認模塊，這個模塊可以匿名，例如：
//demo1.js
export default {
a: 'hello',
b: 'world'
}
對應的引入方式：
//demo2.js import obj from 'demo1'
引入的時候可以給這個模塊取任意名字，例如 "obj"，且不需要用大括號括起來。