3.Vue模块化

模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块（方便代码的重用，从而提升开发效率，并且方便后期的维护）

服务器端模块化规范

1. CommonJS:

• 模块分为单文件模块与包
• 模块成员导出：module.exports和exports
• 模块成员导入：require('模块标识符‘)

ES6模块化的基本语法：

1. 默认导出与导入：

   1. 默认导出语法：export default 默认导出的成员

   2. //当前文件模块m1.js
      
      //定义私有成员a和c
      let a = 10
      let c= 20
      //外界访问不到变量d，因为它没有被暴露出去
      let d = 30
      
      function show(){}
      
      //将本模块中的私有成员暴露出去，供其他模块使用
      export default {
      	a,
      	c,
      	show
      }
      

   3. 默认导入语法 import 接受名称 from '模块标识符'

   4. //导入模块成员
      import m1 from './m1.js'
      
      console.log(m1) //输出：{a:10, c:20, show: [Function: show]}
      

2. 按需导出与按需导入

   1. 按需导出语法 export let s1 = 10

   2. 按需导入语法 import {s1} from '模块标识符'

   3. //当前文件模块为m1.js
      //向外按需导出变量
      export let s1 = 'aaa'
      export let s2 = 'ccc'
      export function say = function(){}
      
      
      //按需导入
      import {s1,s2 as ss2, say} from './m1.js'
      //import m1,{s1,s2 as ss2, say} from './m1.js'  //默认导出和按需导出可以一起导入，每个模块中可以使用多次按需导出，默认导出仅一次
      
      console.log(s1) //aaa
      console.log(ss2) //ccc
      console.log(say) //[Function say]
      

3. 直接导入并执行模块代码

   有时候我们只想单纯执行某个模块中的代码，并不需要得到模块中向外暴露的成员，此时，可以直接导入并执行模块代码

   1. //当前文件模块为m2.js
      for(let i = 0; i < 3; i++){
      	console.log(i)
      }
      
      
      //直接导入
      import './m2.js'