---

只是对上一步模型输出的一个拷贝。 
至此，整个faster-rcnn的训练过程就结束了。

---

首先是读取参数，在prototxt，实际上只读取了param_str: “‘feat_stride’: 16”，这是个很重要的参数，目前我的理解是滑块滑动的大小，对于识别物体的大小很有用，比如小物体的识别，需要把这个参数减小等。 

width) * self._feat_stride，在这里，你会发现，例如你得到的fm是H=61，W=36，然后你乘以16，得到的图形大概就是，其实这个16大概就是网络的缩放比例。接下来就是生成anchor，以及对anchor做一定的筛选，详见代码。

另外一个需要理解的就是proposal layer，这个只是在测试的时候用，许多东西和AnchorTargetLayer类似，不详细介绍，可以查看代码。主要看看forward函数，函数算法介绍在注释部分写的很详细：

在这个函数中会引用NMS方法。

---

在tools文件夹中，是我们直接调用的最外层的封装文件。其中主要包含的文件为：

• compress_net.py：用来压缩参数的，使用了SVD来进行压缩，这里可以发现，作者对于fc6层和fc7层进行了压缩，也就是两个全连接层。
• rpn_genetate.py：这个函数调用了rpn中的genetate函数，之后我们会对rpn层做具体的介绍。这里，主要是一个封装调用的过程，我们在这里调用配置的参数、设置rpn的test参数，以及输入输出等操作。
• 值得注意的是：在我们训练时，我们可以在get_solvers中的max_iters中设置迭代次数，在不确定网络是否可以调通时，减少迭代次数可以减少测试时间。
• 我们在训练faster rcnn网络时，就是调用这个文件训练的

这里我们主要看lib/rpn文件夹下的代码。这里主要介绍了rpn的模型，其中，包含的主要文件如下：

• (ignore).当label>0，也就是有object时，将会进行box的回归。其中，forward函数功能：在每一个cell中，生成9个锚点，提供这9个锚点的细节信息，过滤掉超过图像的锚点，测量同GT的overlap。

作者就是通过以上这些文件生成rpn的。

lib/nms文件夹下是非极大值抑制，这部分大家应该已经非常熟悉了，其Python版本的核心函数为py_cpu_nms.py，具体实现以及注释如下：

1. 首先向CNN网络【ZF或VGG-16】输入任意大小图片；

2. 经过CNN网络前向传播至最后共享的卷积层，一方面得到供RPN网络输入的特征图，另一方面继续前向传播至特有卷积层，产生更高维特征图；

3. 供RPN网络输入的特征图经过RPN网络得到区域建议和区域得分，并对区域得分采用非极大值抑制【阈值为0.7】，输出其Top-N【文中为300】得分的区域建议给RoI池化层；

4. 第2步得到的高维特征图和第3步输出的区域建议同时输入RoI池化层，提取对应区域建议的特征；

5. 第4步得到的区域建议特征通过全连接层后，输出该区域的分类得分以及回归后的bounding-box。

单个RPN网络结构如下:

注意： 上图中卷积层/全连接层表示卷积层或者全连接层，作者在论文中表示这两层实际上是全连接层，但是网络在所有滑窗位置共享全连接层，可以很自然地用n×n卷积核【论文中设计为3×3】跟随两个并行的1×1卷积核实现

RPN的作用：RPN在CNN卷积层后增加滑动窗口操作以及两个卷积层完成区域建议功能，第一个卷积层将特征图每个滑窗位置编码成一个特征向量，第二个卷积层对应每个滑窗位置输出k个区域得分和k个回归后的区域建议，并对得分区域进行非极大值抑制后输出得分Top-N【文中为300】区域，告诉检测网络应该注意哪些区域，本质上实现了Selective

1. 首先套用ImageNet上常用的图像分类网络，本文中试验了两种网络：ZF或VGG-16，利用这两种网络的部分卷积层产生原始图像的特征图；

2. 对于1中特征图，用n×n【论文中设计为3×3，n=3看起来很小，但是要考虑到这是非常高层的feature map，其size本身也没有多大，因此9个矩形中，每个矩形窗框都是可以感知到很大范围的】的滑动窗口在特征图上滑动扫描【代替了从原始图滑窗获取特征】，每个滑窗位置通过卷积层1映射到一个低维的特征向量【ZF网络：256维；VGG-16网络：512维，低维是相对于特征图大小W×H，typically~60×40=2400】后采用ReLU，并为每个滑窗位置考虑k种【论文中k=9】可能的参考窗口【论文中称为anchors，见下解释】，这就意味着每个滑窗位置会同时预测最多9个区域建议【超出边界的不考虑】，对于一个W×H的特征图，就会产生W×H×k个区域建议；

3. 步骤2中的低维特征向量输入两个并行连接的卷积层2：reg窗口回归层【位置精修】和cls窗口分类层，分别用于回归区域建议产生bounding-box【超出图像边界的裁剪到图像边缘位置】和对区域建议是否为前景或背景打分，这里由于每个滑窗位置产生k个区域建议，所以reg层有4k个输出来编码【平移缩放参数】k个区域建议的坐标，cls层有2k个得分估计k个区域建议为前景或者背景的概率。

Anchors是一组大小固定的参考窗口：三种尺度{ 1282，2562，51221282，2562，5122 }×三种长宽比{1:1，1:2，2:1}，如下图所示，表示RPN网络中对特征图滑窗时每个滑窗位置所对应的原图区域中9种可能的大小，相当于模板，对任意图像任意滑窗位置都是这9中模板。继而根据图像大小计算滑窗中心点对应原图区域的中心点，通过中心点和size就可以得到滑窗位置和原图位置的映射关系，由此原图位置并根据与Ground Truth重复率贴上正负标签，让RPN学习该Anchors是否有物体即可。对于每个滑窗位置，产生k=9个anchor对于一个大小为W*H的卷积feature map，总共会产生WHk个anchor。

当然，在RPN网络中我们只需要找到大致的地方，无论是位置还是尺寸，后面的工作都可以完成，这样的话采用小网络进行简单的学习【估计和猜差不多，反正有50%概率】，还不如用深度网络【还可以实现卷积共享】，固定尺度变化，固定长宽比变化，固定采样方式来大致判断是否是物体以及所对应的位置并降低任务复杂度。

有两种方法解决多尺度多长宽比问题:

1. 图像金字塔:对伸缩到不同size的输入图像进行特征提取，虽然有效但是费时.

2. feature map上使用多尺度（和/或长宽比）的滑窗:例如，DPM分别使用不同大小的filter来训练不同长宽比的模型。若这种方法用来解决多尺度问题，可以认为是“filter金字塔(pyramid of filters)”

RPN网络被ImageNet网络【ZF或VGG-16】进行了有监督预训练，利用其训练好的网络参数初始化； 用标准差0.01均值为0的高斯分布对新增的层随机初始化。

同样使用mageNet网络【ZF或VGG-16】进行了有监督预训练，利用其训练好的网络参数初始化。

PASCAL VOC 数据集中既有物体类别标签，也有物体位置标签； 正样本仅表示前景，负样本仅表示背景； 回归操作仅针对正样本进行； 训练时弃用所有超出图像边界的anchors，否则在训练过程中会产生较大难以处理的修正误差项，导致训练过程无法收敛； 对去掉超出边界后的anchors集采用非极大值抑制，最终一张图有2000个anchors用于训练【详细见下】； 对于ZF网络微调所有层，对VGG-16网络仅微调conv3_1及conv3_1以上的层，以便节省内存。

R-CNN网络，采取 image-centric 方式采样，即采用层次采样，先对图像取样，再对anchors取样，同一图像的anchors共享计算和内存。每个mini-batch包含从一张图中随机提取的256个anchors，正负样本比例为1:1【当然可以对一张图所有anchors进行优化，但由于负样本过多最终模型会对正样本预测准确率很低】来计算一个mini-batch的损失函数，如果一张图中不够128个正样本，拿负样本补凑齐。

训练超参数选择： 在PASCAL VOC数据集上前60k次迭代学习率为0.001，后20k次迭代学习率为0.0001；动量设置为0.9，权重衰减设置为0.0005。

多任务目标函数【分类损失+回归损失】具体如下：

训练网络结构示意图如下所示：

如上图所示，RPN网络、Fast R-CNN网络联合训练是为了让两个网络共享卷积层，降低计算量。

文中通过4步训练算法，交替优化学习至共享特征：

1. 进行上面RPN网络预训练，和以区域建议为目的的RPN网络end-to-end微调训练。

2. 进行上面Fast R-CNN网络预训练，用第①步中得到的区域建议进行以检测为目的的Fast R-CNN网络end-to-end微调训练【此时无共享卷积层】。

3. 使用第2步中微调后的Fast R-CNN网络重新初始化RPN网络，固定共享卷积层【即设置学习率为0，不更新】，仅微调RPN网络独有的层【此时共享卷积层】。

4. 固定第3步中共享卷积层，利用第③步中得到的区域建议，仅微调Fast R-CNN独有的层，至此形成统一网络如上图所示。

RPN网络中bounding-box回归的实质其实就是计算出预测窗口。这里以anchor窗口为基准，计算Ground Truth对其的平移缩放变化参数，以及预测窗口【可能第一次迭代就是anchor】对其的平移缩放参数，因为是以anchor窗口为基准，所以只要使这两组参数越接近，以此构建目标函数求最小值，那预测窗口就越接近Ground Truth，达到回归的目的；

R-CNN中，用来bounding-box回归所输入的特征是在特征图上相同的空间size【3×3】上提取的，为了解决不同尺度变化的问题，同时训练和学习了k个不同的回归器，依次对应为上述9种anchors，这k个回归量并不分享权重。因此尽管特征提取上空间是固定的【3×3】，但由于anchors的设计，仍能够预测不同size的窗口。

文中提到了三种共享特征网络的训练方式？

1. 交替训练,训练RPN，得到的区域建议来训练Fast R-CNN网络进行微调；此时网络用来初始化RPN网络，迭代此过程【文中所有实验采用】；

2. 近似联合训练: 如上图所示，合并两个网络进行训练，前向计算产生的区域建议被固定以训练Fast R-CNN；反向计算到共享卷积层时RPN网络损失和Fast R-CNN网络损失叠加进行优化，但此时把区域建议【Fast R-CNN输入，需要计算梯度并更新】当成固定值看待，忽视了Fast R-CNN一个输入：区域建议的导数，则无法更新训练，所以称之为近似联合训练。实验发现，这种方法得到和交替训练相近的结果，还能减少20%~25%的训练时间，公开的python代码中使用这种方法；

图像Scale细节问题？

文中提到训练和检测RPN、Fast R-CNN都使用单一尺度，统一缩放图像短边至600像素； 在缩放的图像上，对于ZF网络和VGG-16网络的最后卷积层总共的步长是16像素，因此在缩放前典型的PASCAL图像上大约是10像素【~500×375；600/16=375/10】。

• 原始尺度：原始输入的大小，不受任何限制，不影响性能；

• 归一化尺度：输入特征提取网络的大小，在测试时设置，源码中opts.test_scale=600。anchor在这个尺度上设定，这个参数和anchor的相对大小决定了想要检测的目标范围；

• 网络输入尺度：输入特征检测网络的大小，在训练时设置，源码中为224×224。

文中提到对于的一张图像，大约有2×9)个anchors，忽略超出边界的anchors剩下6000个anchors，利用非极大值抑制去掉重叠区域，剩2000个区域建议用于训练； 测试时在2000个区域建议中选择Top-N【文中为300】个区域建议用于Fast R-CNN检测。

 a页面点击跳转到b页面，b页面点击浏览器的返回，回到刚才a页面到点击位置 是一般浏览器都会这样做的

但是如果你在返回时不得不给浏览器刷新那么他返回就没法回到之前点击的位置了那么我们就需要用到锚点功能了，但是很可耻的是我们没法获取到浏览器自带的返回事件

问了群了的大牛们他们给了个思路

在idea的左下角，有个Terminal按钮，点击打开控制台：

然后就会在hello-vue目录发现一个node_modules目录，并且在下面有一个vue目录。

node_modules是通过npm安装的所有模块的默认位置。

在hello.html中，我们编写一段简单的代码：

h2中要输出一句话：xx 非常帅。前面的xx是要渲染的数据。

然后我们通过Vue进行渲染：

• 然后构造函数接收一个对象，对象中有一些属性：
  • el：是element的缩写，通过id选中要渲染的页面元素，本例中是一个div
  • data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中
    • name：这里我们指定了一个name属性
• 页面中的h2元素中，我们通过{{name}}的方式，来渲染刚刚定义的name属性。

更神奇的在于，当你修改name属性时，页面会跟着变化：

我们对刚才的案例进行简单修改：

{{name}}，非常帅！！！有{{num}}位女神为他着迷。

• 我们在data添加了新的属性：num
• 在页面中有一个input元素，通过v-model与num进行绑定。
• 同时通过{{num}}在页面输出

我们可以观察到，输入框的变化引起了data中的num的变化，同时页面输出也跟着变化。

• 页面{{num}}与数据num绑定，因此num值变化，引起了页面效果变化。

没有任何dom操作，这就是双向绑定的魅力。

我们在页面添加一个按钮：

• 这里用v-on指令绑定点击事件，而不是普通的onclick，然后直接操作num
• 普通click是无法直接操作num的。

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

在构造函数中传入一个对象，并且在对象中声明各种Vue需要的数据和方法，包括：

接下来我们一 一介绍。

每个Vue实例都需要关联一段Html模板，Vue会基于此模板进行视图渲染。

我们可以通过el属性来指定。

例如一段html模板：

然后创建Vue实例，关联这个div

这样，Vue就可以基于id为app的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用vue特性的。

当Vue实例被创建时，它会尝试获取在data中定义的所有属性，用于视图的渲染，并且监视data中的属性变化，当data发生改变，所有相关的视图都将重新渲染，这就是“响应式“系统。

• input中输入的值，也会导致vm中的name发生改变

Vue实例中除了可以定义data属性，也可以定义方法，并且在Vue实例的作用范围内使用。

每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。

beforeCreated：我们在用Vue时都要进行实例化，因此，该函数就是在Vue实例化是调用，也可以将他理解为初始化函数比较方便一点，在Vue1.0时，这个函数的名字就是init。

created：在创建实例之后进行调用。

beforeMount：页面加载完成，没有渲染。如：此时页面还是{{name}}

beforeDestroy：该函数将在销毁实例前进行调用 。

destroyed：改函数将在销毁实例时进行调用。

updated：组件更新之后。

例如：created代表在vue实例创建后；

我们可以在Vue中定义一个created函数，代表这个时期的钩子函数：

我们可以看下在vue内部的this变量是谁，我们在created的时候，打印this

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的预期值是：单个 JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

例如我们在入门案例中的v-on，代表绑定事件。

• 该表达式支持JS语法，可以调用js内置函数（必须有返回值）
• 表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1;
• 可以直接获取Vue实例中定义的数据或函数

使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的{{}}，加载完毕后才显示正确数据，我们称为插值闪烁。

我们将网速调慢一些，然后试试看刚才的案例：

• v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出
• v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染

并且不会出现插值闪烁，当没有数据时，会显示空白。

刚才的v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。接下来学习的v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。

既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前v-model的可使用元素有：

基本上除了最后一项，其它都是表单的输入项。

• select单选对应字符串，多选对应也是数组

v-on指令用于给页面元素绑定事件。

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。

• .stop ：阻止事件冒泡到父元素
• .prevent：阻止默认事件发生
• .capture：使用事件捕获模式
• .self：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
• .once：只执行一次

效果：（右键“增加一个”，不会触发默认的浏览器右击事件；右键“减少一个”，会触发默认的浏览器右击事件）

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

• .delete (捕获“删除”和“退格”键)

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

遍历数据渲染页面是非常常用的需求，Vue中通过v-for指令来实现。

• items：要遍历的数组，需要在vue的data中定义好。
• item：迭代得到的数组元素的别名

在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：

• items：要迭代的数组
• item：迭代得到的数组元素别名
• index：迭代到的当前元素索引，从0开始。

v-for除了可以迭代数组，也可以迭代对象。语法基本类似

• 1个参数时，得到的是对象的属性
• 2个参数时，第一个是属性，第二个是键
• 3个参数时，第三个是索引，从0开始

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

这个功能可以有效的提高渲染的效率。

但是要实现这个功能，你需要给Vue一些提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。

• 这里使用了一个特殊语法：:key="" 我们后面会讲到，它可以让你读取vue中的属性，并赋值给key属性
• 这里我们绑定的key是数组的索引，应该是唯一的

v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。

当v-if和v-for出现在一起时，v-for优先级更高。也就是说，会先遍历，再判断条件。

修改v-for中的案例，添加v-if：

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

html属性不能使用双大括号形式绑定，只能使用v-bind指令。

我们可以借助于v-bind指令来实现：

渲染后的效果：（具有active和hasError的样式）

你可以在对象中传入更多属性来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class 属性共存。如下模板:

通常情况下，绑定的数据对象不必内联定义在模板里：

数组语法可以将多个样式对象应用到同一个元素上：

直接绑定到一个样式对象通常更好，这会让模板更清晰：

在插值表达式中使用js表达式是非常方便的，而且也经常被用到。

但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便，例如下面的场景，我们有一个日期的数据，但是是毫秒值：

我们在页面渲染，希望得到yyyy-MM-dd的样式：

虽然能得到结果，但是非常麻烦。

Vue中提供了计算属性，来替代复杂的表达式：

• 计算属性本质就是方法，但是一定要返回数据。然后页面渲染时，可以把这个方法当成一个变量来使用。

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要birthday还没有发生改变，多次访问 birthday 计算属性会立即返回之前的计算结果，而不必再次执行函数。

watch可以让我们监控一个值的变化。从而做出相应的反应。

在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。

但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。

我们通过Vue的component方法来定义一个全局组件。

• 组件其实也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等
• 不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。
• 但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板
• 全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了。
• data必须是一个函数，不再是一个对象。

定义好的组件，可以任意复用多次：

你会发现每个组件互不干扰，都有自己的count值。怎么实现的？

组件的data属性必须是函数！

当我们定义这个 <counter> 组件时，它的data 并不是像这样直接提供一个对象：

取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

如果 Vue 没有这条规则，点击一个按钮就会影响到其它所有实例！

一旦全局注册，就意味着即便以后你不再使用这个组件，它依然会随着Vue的加载而加载。

因此，对于一些并不频繁使用的组件，我们会采用局部注册。

我们先在外部定义一个对象，结构与创建组件时传递的第二个参数一致：

然后在Vue中使用它：

• 其key就是子组件名称
• 效果与刚才的全局注册是类似的，不同的是，这个counter组件只能在当前的Vue实例中使用

通常一个单页应用会以一棵嵌套的组件树的形式来组织：

• 页面首先分成了顶部导航、左侧内容区、右侧边栏三部分
• 左侧内容区又分为上下两个组件
• 右侧边栏中又包含了3个子组件

各个组件之间以嵌套的关系组合在一起，那么这个时候不可避免的会有组件间通信的需求。

1. 父组件使用子组件时，自定义属性（属性名任意，属性值为要传递的数据）
2. 子组件通过props接收父组件属性

父组件使用子组件，并自定义了title属性：

我们定义一个子组件，并接受复杂数据：

• 这个子组件可以对 items 进行迭代，并输出到页面。
• props：定义需要从父组件中接收的属性
  • items：是要接收的属性名称
    • type：限定父组件传递来的必须是数组

当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。

我们在父组件中使用它：

type类型，可以有：

注意：子组件模板有且只有一个根标签

给 prop 传入一个静态的值：

给 prop 传入一个动态的值： （通过v-bind从数据模型中，获取title的值）

静态传递时，我们传入的值都是字符串类型的，但实际上任何类型的值都可以传给一个 props。

• 子组件接收父组件的num属性
• 子组件定义点击按钮，点击后对num进行加或减操作

我们尝试运行，好像没问题，点击按钮试试：

子组件接收到父组件属性后，默认是不允许修改的。怎么办？

既然只有父组件能修改，那么加和减的操作一定是放在父组件：

但是，点击按钮是在子组件中，那就是说需要子组件来调用父组件的函数，怎么做？

我们可以通过v-on指令将父组件的函数绑定到子组件上：

在子组件中定义函数，函数的具体实现调用父组件的实现，并在子组件中调用这些函数。当子组件中按钮被点击时，调用绑定的函数：

• vue提供了一个内置的this.$emit()函数，用来调用父组件绑定的函数

现在我们来实现这样一个功能：

一个页面，包含登录和注册，点击不同按钮，实现登录和注册页切换：

为了让接下来的功能比较清晰，我们先新建一个文件夹：src

然后编写页面的基本结构：

7.1.2.编写登录及注册组件

接下来我们来实现登录组件，以前我们都是写在一个文件中，但是为了复用性，开发中都会把组件放入独立的JS文件中，我们新建一个user目录以及login.js及register.js：

编写组件，这里我们只写模板，不写功能。

7.1.3.在父组件中引用

我们期待的是，当点击登录或注册按钮，分别显示登录页或注册页，而不是一起显示。

但是，如何才能动态加载组件，实现组件切换呢？

虽然使用原生的Html5和JS也能实现，但是官方推荐我们使用vue-router模块。

使用vue-router和vue可以非常方便的实现 复杂单页应用的动态路由功能。

新建vue-router对象，并且指定路由规则：

• 创建VueRouter对象，并指定路由参数
• routes：路由规则的数组，可以指定多个对象，每个对象是一条路由规则，包含以下属性：

在父组件中引入router对象：

• 通过<router-view>来指定一个锚点，当路由的路径匹配时，vue-router会自动把对应组件放到锚点位置进行渲染
• 通过<router-link>指定一个跳转链接，当点击时，会触发vue-router的路由功能，路径中的hash值会随之改变

注意：单页应用中，页面的切换并不是页面的跳转。仅仅是地址最后的hash值变化。

Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。

graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

• 将许多碎小文件打包成一个整体，减少单页面内的衍生请求次数，提高网站效率。
• 将ES6的高级语法进行转换编译，以兼容老版本的浏览器。
• 将代码打包的同时进行混淆，提高代码的安全性。

webpack支持全局安装和本地安装，官方推荐是本地安装，我们按照官方的来。

此时，我们注意下项目中文件夹下，会有一个package.json文件。（其实早就有了）

打开文件，可以看到我们之前用npm安装过的文件都会出现在这里：

学习Webpack，你需要先理解四个核心概念：

• webpack打包的起点，可以有一个或多个，一般是js文件。webpack会从启点文件开始，寻找启点直接或间接依赖的其它所有的依赖，包括JS、CSS、图片资源等，作为将来打包的原始数据

• 出口一般包含两个属性：path和filename。用来告诉webpack打包的目标文件夹，以及文件的名称。目的地也可以有多个。

• webpack本身只识别Js文件，如果要加载非JS文件，必须指定一些额外的加载器（loader），例如css-loader。然后将这些文件转为webpack能处理的有效模块，最后利用webpack的打包能力去处理。

• 插件可以扩展webpack的功能，让webpack不仅仅是完成打包，甚至各种更复杂的功能，或者是对打包功能进行优化、压缩，提高效率。

接下来，我们编写一个webpack的配置，来指定一些打包的配置项。配置文件的名称，默认就是webpack.config.js，我们放到hello-vue的根目录：

配置文件中就是要指定上面说的四个核心概念，入口、出口、加载器、插件。

不过，加载器和插件是可选的。我们先编写入口和出口

webpack打包的启点，可以有一个或多个，一般是js文件。现在思考一下我们有没有一个入口？貌似没有，我们所有的东西都集中在index.html，不是一个js，那怎么办？

我们新建一个js，把index.html中的部分内容进行集中，然后在index.html中引用这个js不就OK了！

• 原来的index.html中引入了很多其它js，在这里我们使用es6的import语法进行导入。

这样，index.js就成了我们整个配置的入口了。

出口，就是输出的目的地。一般我们会用一个dist目录，作为打包输出的文件夹：

在控制台输入以下命令：

随后，查看dist目录：

尝试打开build.js，你根本看不懂：

所有的js合并为1个，并且对变量名进行了随机打乱，这样就起到了 压缩、混淆的作用。

我们来编写一段CSS代码，对index的样式做一些美化：

前面说过，webpack默认只支持js加载。要加载CSS文件，必须安装加载器：

此时，在package.json中能看到新安装的：

因为入口在index.js，因此css文件也要在这里引入。依然使用ES6 的模块语法：

我们每次使用npm安装，都会在package.json中留下痕迹，事实上，package.json中不仅可以记录安装的内容，还可编写脚本，让我们运行命令更加快捷。

我们可以把webpack的命令编入其中：

以后，如果要打包，就可以直接输入：npm run build即可。

npm run ：执行npm脚本，后面跟的是配置脚本的名称build

之前的打包过程中，除了HTML文件外的其它文件都被打包了，当在线上部署时，我们还得自己复制HTML到dist，然后手动添加生成的js到HTML中，这非常不友好。

2）将原来HTML中的引入js代码删除：

4）查看dist目录：

刚才的案例中，每次修改任何js或css内容，都必须重新打包，非常麻烦。

webpack给我们提供了一个插件，可以帮我们运行一个web服务，加载页面内容，并且修改js后不需要重新加载就能看到最新结果：

–open：自动在默认浏览器打开

在开发中，需要打包的东西不止是js、css、html。还有更多的东西要处理，这些插件和加载器如果我们一一去添加就会比较麻烦。

幸好，vue官方提供了一个快速搭建vue项目的脚手架：vue-cli

使用它能快速的构建一个web工程模板。

我们新建一个module：

前面几项都走默认或yes

最后，再选yes，使用 npm安装

开始初始化项目，并安装依赖，可能需要

需要注意的是，我们看到有一类后缀名为.vue的文件，我们称为单文件组件

只不过，我们在js中编写 html模板和样式非常的不友好，而且没有语法提示和高亮。

而单文件组件中包含三部分内容：

• template：模板，支持html语法高亮和提示
• script：js脚本，这里编写的就是vue的组件对象，还可以有data(){}等
• style：样式，支持CSS语法高亮和提示

每个组件都有自己独立的html、JS、CSS，互不干扰，真正做到可独立复用。

• 可以看到这引入了非常多的依赖，绝大多数都是开发期依赖，比如大量的加载器。
• start：使用了npm run dev命令，与上面的dev效果完全一样，当脚本名为“start”时，可以省略“run”。
• build：等同于webpack的打包功能，会打包到dist目录下。