Vue 的模塊機(jī)制

Vue 是通過 webpack 實(shí)現(xiàn)的模塊化，因此可以使用 import 來引入模塊，例如：

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

? ? ? ?意思是，你的模塊可以省略 ".js"，".vue"，“.json” 后綴，weebpack 會(huì)在之后自動(dòng)添加上；可以用 "@" 符號(hào)代替 "src" 字符串等。

　　export 用來導(dǎo)出模塊，Vue 的單文件組件通常需要導(dǎo)出一個(gè)對(duì)象，這個(gè)對(duì)象是 Vue 實(shí)例的選項(xiàng)對(duì)象，以便于在其它地方可以使用 import 引入。而 new Vue() 相當(dāng)于一個(gè)構(gòu)造函數(shù)，在入口文件 main.js 構(gòu)造根組件的同時(shí)，如果根組件還包含其它子組件，那么 Vue 會(huì)通過引入的選項(xiàng)對(duì)象構(gòu)造其對(duì)應(yīng)的 Vue 實(shí)例，最終形成一棵組件樹。

　　export 和export default 的區(qū)別在于：export 可以導(dǎo)出多個(gè)命名模塊，例如：

//demo1.js

export const str = 'hello world';

export function f(a){ return a+1;}

對(duì)應(yīng)的引入方式：

//demo2.js

import { str, f } from 'demo1'

export default 只能導(dǎo)出一個(gè)默認(rèn)模塊，這個(gè)模塊可以匿名，例如：

//demo1.js

export default {

? ? a: 'hello',

? ? b: 'world'? ? ?

}

　　對(duì)應(yīng)的引入方式：

//demo2.js

import obj from 'demo1'

引入的時(shí)候可以給這個(gè)模塊取任意名字，例如 "obj"，且不需要用大括號(hào)括起來。