vue模块化

• ES模块化的导入和导出
  html部分：

  <script src="./aaa.js" type="module"></script>
  <!-- <script src="./bbb.js" type="module"></script> -->
  <script src="./ccc.js" type="module"></script>

模块部分：

let name = "xiaoming"
let age = 12
let flag = true

function sum1(num1, num2) {
  return num1 + num2
}

if (flag) {
  console.log(sum1(20, 30));
}

class Person1 {
  constructor(name, age) {
    this.name = name;
    this.age = age
  }

  run() {
    console.log(this.name + ' run----------------');
  }
}

// 1.导出方式一
export {
  flag, sum1, Person1
}

// 2.导出方式二
export let num1 = 1000;
export let height = 1.88;
export function sum2(num1, num2) {
  return num1 + num2;
}
export class Person2 {
  constructor(name, age) {
    this.name = name;
    this.age = age
  }

  run() {
    console.log(this.name + ' run----------------');
  }
}

// 3.export default
// 某些情况下，一个模块中包含某个功能，我们并不希望给这个功能命名，而是让导入者自己来命名，同一个模块中default只能有一个
// const address = '山东省';
// export default address;
export default function test(){
  console.log('export default 导出函数');
}

导出部分：

// 1.导出方式一
import{flag, sum1, Person1} from './aaa.js'
if (flag) {
  console.log('小明是天才');
  console.log(sum1(10, 20));
  let p1 = new Person1('小一', 11);
  p1.run()
}

// 2.导出方式二
import {num1, height, sum2, Person2} from './aaa.js';
console.log(num1);
console.log(height);
console.log(sum2(11, 22));
let p = new Person2('小二', 5);
p.run()

// 3.export default
import ttt from './aaa.js'   // 导出aaa中默认导出的内容
ttt()

// 全部导入
import * as info from './aaa.js';
console.log(info.sum1(1, 2));
console.log(info.sum2(2, 2));