Vue的組件為什么要export default

Vue 的模塊機制

　　Vue 是通過 webpack 實現的模塊化，因此可以使用 import 來引入模塊，例如：

　　此外，你還可以在 bulid/webpack.base.conf.js 文件中修改相關配置：

　　意思是，你的模塊可以省略 ".js"，".vue"，“.json” 后綴，weebpack 會在之后自動添加上；可以用 "@" 符號代替 "src" 字符串等。

 

　　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"，且不需要用大括號括起來。