Vue模块化

Vue模块化

1 模块化思想

有很多模块化思想

1. commo js

2. AMD

3. CMD

4. ES6

   …

模块化不仅可以帮助我们解决作用域问题，代码管理，提高代码质量等问题还可以减少我们在开发过程中出现的"冲突"。

2 模块间的访问

2.1 {}式导入引用

2.1.1 导入

import {
     flag,num1} from "./01模块间的访问b";
if (flag){
     
    console.log(num1);
}

2.1.2导出

let num1=100;
let flag=true;
export {
     flag,num1}

2.2 自定义时导出

2.2.1导入

import {
     num} from "./02模块间的访问定义变量时导出b";
console.log(num)

2.2.1导出

export var num=1;

2.3 函数类导出

2.3.1 导入

import {
     numf} from "./03导出函数类b";

2.3.2 函数类导出

export function numf(aa,bb){
     
    return {
     aa,bb}
}

2.3.3 模式导出

更好显示变量更加清楚,更推荐使用

export class numc{
     
    return(){
     
        console.log("ES6导入导出");
    }
}

2.4 default模式导入导出

注意一般一个模块只有一个defalut导出，否则报错

一般使用在一个模块中的某功能在其他模块中重复使用的时候，不希望出现重名的情况，在这里导入之后是可以自定义名字的。

2.4.1 ES6模式 导入

import addr from "./04";
let message =addr();

2.4.2 导入

import {
     dd} from "dd";

2.4.3 默认导出

export default class dd{
     
    return(){
     
        console("default");
    }
}

2.5 整个模块全部导入

2.5.1 导入

import * as all from "./02模块间的访问"