30单文件组件与ES6 模块化

单文件组件与ES6 模块化

一、ES6 模块化

1. export/import导出/导入模块

• export 暴露（导出）

  • 分别暴露：

    export const school = Vue.extend({});
    export var val = 100;
    

  • 统一暴露

    const school = Vue.extend({});
    var val = 100;
    
    export {school,val};
    

  • 默认暴露

    const school = Vue.extend({});
    
    export default school;
    

    当暴露的只有单个时，一般用默认暴露，导入方便。

• import 导入

  • 分别暴露 && 统一暴露

    import {"school","val"} from "./path/file.js";
    

  • 默认暴露

    import school from "./path/file.js";
    

    注意：当一个js 文件只暴露出一个时，无论用什么接收导入，都会获取。 也就是说， school可以写成其他的任意有效值。

浏览器不能直接支持ES6的模块化语法。所以可以在脚手架上进行。