Vue全家桶-前置ES6模块化

概念：模块化就是将代码进行一个拆分，方便重复利用，类似于java中的导包，要使用一个类，必须先导包

模块功能主要有两个命令构成：export和import

定义一个js文件：hello.js，里面有一个对象：

const util = {
    sum(a,b){
        return a + b;
    }
}

使用export将这个对象导出：

const util = {
    sum(a,b){
        return a + b;
    }
}
export util;

简略写法：

export const util = {
    sum(a,b){
        return a + b;
    }
}

export不仅可以导出对象，一切js变量都可以导出，当要导出多个值的时候简写成：

var name = "jack"
var age = 21
export {name,age}

js提供了default关键字，可以对导出的变量名进行省略，使用者导入时，可以任意起名字

// 无需声明对象的名字
export default {
	sum(a,b){
        return a + b;
    }
}

使用export命令定义模块的对外接口以后，其他js文件就可以通过import命令加载这个模块
例如我要使用上面导出的util：

// 导入util
import util from 'hello.js'
// 调用util中的属性
util.sum(1,2)

要批量导入前面导出的name和age：

import {name, age} from 'user.js'

console.log(name + " , 今年"+ age +"岁了")

1. 模块化就是把拆分代码，方便重复利用
2. 模块功能主要由两个命令构成：export和import。
   • export命令用于规定模块的对外接口，
   • import命令用于导入其他模块提供的功能。