Vue的模块化开发

Vue的模块化开发

为什么需要模块化：
在我们以前编写的js代码中，因为js代码从上到下执行，这样当很多人同时编写js时，可能A写的变量被B修改了，当A在使用自己的变量，那么就可能报错，以前有一个解决方案，就是使用函数，但是同时又出现了一个问题，就是当A使用函数编写js时，A在其他地方使用里面变量，就使用不到（函数变量的作用域），这个时候就可以使用模块化开发了。

模块化的两个核心：
1.导出：把后期需要使用的变量、函数等导出来
2.导入：在需要使用变量的地方，导入这些，即可使用

以前我们需要自己手动封装模块化代码，现在有很多已经成熟的技术，我们可以直接使用：
CommonJS、AMD、CMD，也有ES6的Modules

es6导出：

export let name = '张三';
export let age = 29;
export let height = 1.88;
/*
* 上边使用单个导出，还可以使用下面方式
*let name = '张三';
let age = 29;
let height = 1.88;
* export{name,age,heighr}
* */

/*也可以导出函数和类*/
export function a(){
    console.log("aaaa");
}

/*导出自定义名称的函数：一个模块中只能有一个这样的函数*/
export default function (){
    console.log("需要定义方法名的函数")
}

es6导入

import{name,age,height,a} from './aaa.js'
//import * as info from './aaa.js' 下面使用时，就需要使用info.的形式调用属性或方法
//张三 29 1.88
console.log(name,age,height);
a();

/*导入自定义名称的函数，需要自己定义名字*/
import run from './aaa.js'
run();

需要在引入js的地方面加上type属性

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