vue的三个特点:
Ø Mvvm
Ø 组件化
Ø 模块化
模块化是指文件的组织，管理，使用的方式 。
代码的开发阶段：把一个大的文件，拆分成几个小文件，它们之间相互引用，依赖。
代码发布之后：把这些小文件打包成一个大文件webpack。
1.1. 为什么要用模块化开发
以下面代码为例：
这个index.html文件中一共引入了8个 js文件。
这样组织至少会有两个问题：
（1）全局变量污染
（2）文件之间相互依赖的问题：Balloon.js文件必须要依赖于myjquery.js(这是我们自己写一个库)，因为balloon.js中产生随机数所用的函数GetR来自于myjquery.js的。
解决：
（1）全局变量污染的问题，我们可以通过立即执行的函数表达式来解决。
（2）我们之前组织代码的方式，就不能很方便地看出来，哪个文件依赖于哪个文件。就算我们事先知道A.js依赖于B.js（可能A.js中用了B.js中的方法），我们也没有办法在浏览器端保证：B.js会在A.js之前加载完成。
1.2. 模块化的发展
模块化的思想主要是从后端的程序中引入的。
php -- include ”header.php”
1.2.1. 理解css中的模块化
Css -- @import
在es6之前，它不支持在一个js中直接去引入另一个js文件。
Ø 原始方式 --- 无模块时代
Ø 萌芽时代 --- 闭包+自执行函数、命名空间、人肉方式、配置参数
Ø CommonJS规范 --- CommonJs社区制定了Modules/1.0规范
Ø AMD规范 --- 革新派，RequireJS
Ø CMD规范 --- 中间派，seajs
Ø es6模块化 --- 终极解决方案
1.3. 闭包+立即执行函数的方式
它只是解决了文件之间的相互依赖关系的描述：
你一看到这个iife就可以知道，当前的这个模块（js文件）是依赖于哪些模块（js文件）的。
zepto就是这样做的
1.4. CommonJS规范
CommonJS规范源于Modules/1.0，在node.js中率先实现了。
核心内容有如下几点：
Ø 使用require方法引入其他模块（js文件），执行的结果即为别的模块（js文件）暴漏出来的API。
Ø 模块通过变量module.exports导出API，exports只能是一个对象，暴漏的API须作为此对象的属性。
Ø 如果require函数引入的模块中也包含依赖，则依次加载这些依赖。
Ø 如果引入模块失败，那么require函数应该报一个异常。
1.4.1. 定义模块
1.4.1.1. 格式
module.exports={
键值对
}
1.4.2. 引入模块
Let obj = require(“模块名’)
require函数，会返回一个对象，返回的是在模块中使用module.exports导出的对象
1.4.2.1. 引入模块的格式
模块名的路径，有两种:
Ø 自定义模块：使用相对路径，以./或../开头 模块名后可以加.js，也可以不加；你不能直接写模块名，就算是两个文件在同一个目录下，也加./
Ø 第三方模块：只需要写上模块名即可。这里的第三方模块，其实就是使用npm来安装的那些模块。
例如，你安装了vue模块。则在node_modules下会多一个文件夹：
你要想使用vue模块，只需要：
1.4.3. 示例
1.4.3.1. 浏览器端 不支持
现在有一个简单的需求,有三个文件如下：
Ø Index.html：它引入index.js文件
Ø Index.js：它执行一些功能，但它要入unit.js
Ø Unit.js：它就是一个库，提供一些方法
如果你现在去打开index.html文件，则浏览器一定会报错：
因为commonjs规则在浏览器端不支持。
但，在node.js中是支持commonjs规则的，即，上面的index.js文件可以直接通过node去运行。
1.4.3.2. 在nodejs中是支持的
1.4.4. 用browserify工具，把代码编译打包一下，让浏览器也能用
先通过npm安装。
（1）建议先在根目录，创建好package.json文件。
（2）全局安装和本地安装都可以。
npm install browserify -g (在任何一个小黑窗下都可以使用browserify命令)
或者是
npm install browserify --save （只能在当前的目录下使用这个命令）
（3）运行browserify 命令去转码
格式：
Browserify 要转码的.js -o 转码之后的.js
示例：
这里的blunder.js会自动创建的。
如下:
（4）在html中引入这个blunder.js即可。（之前引的是index.js，它不能用）
效果如下：
1.4.5. 应用：对前面的打气球游戏的js代码进行模块化处理
1.4.5.1. 把之前的立即执行的函数表达式的写法，改成commonjs的定义模块
改成：
把
改成：
其它的js文件的写法都类似。
对game.js
1.4.5.2. 用browserify对game.js进行转码
在html中引入转码之后的文件即可。
commonjs主要是在服务器端使用，在浏览器端虽然可以用browserify进行转码，但，并没有体现出浏览器与服务器端的区别：
浏览器端的代码是异步的，而服务器端是同步的。在浏览器端，提出 amd规范。
1.5. amd 规范 require.js
Asynchronous Module Definition
"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。
amd是一种规范。require.js实现了这种规范。
1.5.1. 代表产品：require.js
1.5.2. Require.js的使用
1.定义模块
2.在主文件中引用模块
3.html中引入require.js
1.5.2.1. requirejs 定义模块（不是入口文件）
define(['模块1',’'模块2'’],function(变量1,变量2){
return {
}
});
(1)这里的变量就是这个模块的别名。
(2)如果当前模块不依赖其它的模块，则不需要写第一个参数,第二个参数中的形参列表也不要。
(3)这里也是使用模块。
示例:
1.5.2.2. requirejs 定义入口文件
require([“模块1”，“模块2”],function(变量1，变量2){
//你的代码
});
示例
Index.js需要使用unit.js这个模块
1.5.2.3. 在html页面中引入requirejs并指定入口文件
<script src="js/require.js" data-main="js/main" ></script>
(1)data-main是指定的主入口的名字。类似于c语言中的main函数一样。
(2)可以省略.js后缀。
效果如下：
1.5.3. 应用 ：用require.js去改写对前面的打气球游戏的js代码
部分代码如下：
1.6. cmd规范 sea.js
“Common Module Definition”的缩写，意思就是"通用模块定义"。
cmd是一种模块化规范。
CMD推崇依赖就近，延迟执行
sea.js是推动cmd规范的产物。
1.6.1. 代表产品sea.js
1.6.1.1. seajs 定义模块--不需要引用其它模块
define(function(require,exports,module){
//你的代码，函数，变量，对象
//导出模块有三种方式
exports.属性名=值。//方式一
module.exports.属性名=值。//方法二
return 对象//方法三
});
(1)define是seajs定义的全局函数
1.6.1.2. seajs 定义模块--需要引用其它模块
define(function(require,exports,module){
//你的代码，函数，变量，对象
Var obj = require(‘模块名’)
//导出模板有三种方式
exports.属性名=值。//方式一
module.exports.属性名=值。//方法二
return 对象//方法三
});
1.6.1.3. 主入口
<script >
seajs.use(["模块1",“模块2”],function(变量1,变量2){
});
1.6.1.4. html页面中引入sea.js,和入口文件
1.6.2. 应用 ：用sea.js去改写对前面的打气球游戏的js代码
注意一下：sea.js文件最好是和你的模块放在同一级目录下。
1.7. 查看jquery的代码
1.8. es6模块化
Import：导入。在自己当前的模块去使用其它模块
Export：导出。在定义模块时，决定把哪些内容暴露出去：当别的模块去引入当前模块，别人会得到什么东西。
1.8.1. 示例
Ø Index.html：引入index.js
Ø Index.js：要去引用unit.js
Ø Unit.js
现在，直接打开浏览器去访问index.html会得到一个错误：
由于import是es6的语法。在浏览器中不支持的，但我们可以通过babel进行转码。
下面，就要开始去转下码。
1.8.1.1. babel转码
Ø 安装bable
npm install babel-cli -g
Ø 安装两个包
npm install babel-preset-es2015 babel-preset-stage-2 --save-dev
Ø 编写配置文件
.babelrc
{
"presets":["es2015","stage-2"]
}
运行转码命令：
现在我们的文件如下：：
细节：
在index.es5.js中，我们引入的文件应该要从unit.js改成unit.es5.js
在index.html中，把index.js 改成 index.es5.js。结果还是报错：require不认识。
我们通过babel从es6 --> es5之后：
实际是es6规范 ---> common规范
| Es6 | Es5 |
| | |
| | |
| Es6规范 | commonjs规范 |
commonjs规范:它还是不能在浏览器工作。但它可以直接在nodejs中运行。
模块化开发详细介绍及详细用法2. 模块化总结
为了让代码能够在浏览器中运行，我们还需要对index.es5.js文件进行browserify处理。
1.8.1.2. browserify处理
对入口文件（这个它引用其它的模块）进行处理：
browserify会分析index.es5.js文件，找出这个文件中依赖了哪些其它的文件，把它的依赖文件全部装到一个文件中：bundle.js。
修改index.html文件，把bundle.js引入：
成功啦！！！
1.8.2. Export
你在定义模块时，你可以决定，当你的模板被其它模板引入时，你暴露出去的内容是什么。
1.8.2.1. 逐个导出
1.8.2.2. 批量导出
1.8.2.3. 别名导出
1.8.3. Import
格式：
Import {变量名1,变量名2.... } from “模块名”
1.8.3.1. 逐个导出和批理导出
对于上面unit模块，它的两种导出方式，我们都可以用如下的方式进行导入：
（1）导入时，你使用的变量名data,name必须要与unit模块中导出时用的名字要一致。
（2）两个变量之间先后顺序是没有的关系的（对象是属性的无序集合）
（3）上面的模块的路径的写法（”./unit”）与commonjs中的require的要求是一样的：
Ø 如果自己定义的模块，则一定要加 ./(表示当前目录) ../(上一级目录)
Ø 如果是第三方的模块，则直接写模块名。
如上代码说明，vue这个模块是默认导出的。
1.8.3.2. 别名导入
在导入数据时，取个别名。
1.8.4. Export default
在导出和导入我们需要保持属性名是一致，这就比较麻烦。
我们通过通过exprot default来把取名的工作交给引用模块：即我导出时，不取名字，你导入时，爱取什么名字就取什么名字。
1.8.4.1. 定义模块
1.8.4.2. 引入模块
1.8.4.3. Export default和批量导出可以一起用
导出模块
导入模块
1.8.5. 模块的整体加载
Import * as
模块还是正常地批量导出：
导入时
2. 模块化总结
模块化
Ø 一个js文件就是一个模块；
Ø 把很多个模块通过相互引用的方式组合在一起 ；
Ø 在index.html中，只引入一个模块
有四种规范
Ø Commonjs:在nodejs中支持的。在服务器端工作。
Ø Amd：在浏览器端工作 。代表产品是：require.js
Ø Cmd：在浏览器端工作 。代表产品是：sea.js
Ø ES6 :正宗。完全可以构建 服务器端 和浏览器 都支持的 方案。
| 方案名 | 定义模块 | 使用模块 | 主入口 | |
| commonjs | modules.exports={} | require() obj =require(‘./模块名’) | browserify转码 | |
| amd-seajs | defind(require,export,module) | defined(require,export,module){ require (./模块名)} | seajs.use([],functin(){ }) | sea.js |
| cmd-require | define(function(){return {} }); | define(['模块'],function(变量){return {} }); | require(["game"],function(g){}) data-main | common.js |
| es6 | export | import | babel browserify |