vue模块化导入和导出

目录标题

  • CommonJS
  • ES6导入和导出
  • 匿名函数

CommonJS

vue模块化导入和导出_第1张图片

ES6导入和导出

vue模块化导入和导出_第2张图片
vue模块化导入和导出_第3张图片vue模块化导入和导出_第4张图片
vue模块化导入和导出_第5张图片
例子:
index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script src="aaa.js" type="module"></script>
<script src="bbb.js" type="module"></script>
<script src="mmm.js" type="module"></script>
</body>
</html>

aaa.js

var name = '小明'
var age = 18
var flag = true

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

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

// 1.导出方式一:
export {
     
  flag, sum
}

// 2.导出方式二:
export var num1 = 1000;
export var height = 1.88


// 3.导出函数/类
export function mul(num1, num2) {
     
  return num1 * num2
}

export class Person {
     
  run() {
     
    console.log('在奔跑');
  }
}

// 5.export default
// const address = '北京市'
// export {
     
//   address
// }
// export const address = '北京市'
// const address = '北京市'
//
// export default address

export default function (argument) {
     
  console.log(argument);
}

mmm.js

// 1.导入的{}中定义的变量
import {
     flag, sum} from "./aaa.js";

if (flag) {
     
  console.log('小明是天才, 哈哈哈');
  console.log(sum(20, 30));
}

// 2.直接导入export定义的变量
import {
     num1, height} from "./aaa.js";

console.log(num1);
console.log(height);

// 3.导入 export的function/class
import {
     mul, Person} from "./aaa.js";

console.log(mul(30, 50));

const p = new Person();
p.run()

// 4.导入 export default中的内容
import addr from "./aaa.js";

addr('你好啊');

// 5.统一全部导入
// import {flag, num, num1, height, Person, mul, sum} from "./aaa.js";

import * as aaa from './aaa.js'

console.log(aaa.flag);
console.log(aaa.height);


bbb.js

import {
     sum} from './aaa.js'

var name = '小红'
var flag = false

console.log(sum(100, 200));


匿名函数

vue模块化导入和导出_第6张图片
下一篇

你可能感兴趣的:(vue,vue)