项目总结

项目流程：

多区域轮播
多区域列表循环展示
根据不同城市展示不同景点

城市展示，城市搜索
城市右侧字母与左侧城市联动效果

公用画廊组件
渐隐渐现header组件
递归展示列表组件

axios进行数据获取
vue router多页面路由
vuex各个组件之间的数据共享
异步组件让代码上线，性能更优
stylus编写样式
递归组件 调用自己
插件实现轮播效果
公用组件的拆分

js+es6+webpack+npm
vue的官方文档学习

第二章：

MVVM
组件化，全局组件，局部组件（需注册）
父子组件传值

每个组件就是一个vue实例

第三章：

模板语法：插值表达式 v-text v-html 双引号或者两对{{}}中都是js表达式

计算属性 侦听器 方法
如果某个功能以上三个都能实现，优先选用computed，性能最好，有缓存
计算属性的getter与setter
vue中的样式绑定---对象与数组的表示----style/class表示

vue中的条件渲染--模板标签是否显示
v-if dom结构的存在与消失
v-show display的none

v-if与v-else 要紧密连接 才能使用

v-if 的组件复用 可以设置key 唯一元素 就不会复用标签了 diff算法里的原理

vue中的列表渲染 （item，index）of list
vue中操作数组不可以直接通过数组下标操作数组，这样页面不会有相应，只能通过vue提供的七个数组变异方法来实现响应式的效果
push pop unshift splice sort reverse
或者改变引用
直接替换整个数组（替换为新的数组） 也就是给list赋值为一个新的数组 将list的引用指向新的地址

template 占位符 不会真的被渲染到页面上 可以用来包裹元素 避免再次使用div包裹

（item，key，index） of list

如果给vue里data已经存在的对象修改对象属性的属性值，可以实现响应。但如果给对象添加之前没有的属性，不会实现响应。要像上文一样改变引用。

另一个解决办法：
vue中的set方法
Vue.set(obj,name,value)
可以实现响应
另一个写法
vm.$set(obj,name,value)

总结：1.改变引用2.使用变异方法3.vue的set方法

第四章：

使用is属性防止有些标签不能在另一个标签内嵌使用

自定义组件的data必须是个函数，因为组件复用，防止复用后产生冲突，共用数据。使用函数可以让每个子组件有自己的数据。

操作dom结点

this.refs.ref(属性名）是拿到单个节点。可以使用dom的API

如果是在父组件里的模板（子组件。自定义组件）里使用ref属性，在vue的根实例中通过this.$refs.ref(属性名）访问，访问的不是dom节点，而是子组件对象的引用，借此可以访问子组件中data的数据。

总结：直接在html标签上使用ref ，获取的是dom节点。在组件标签上使用ref，获取的是组件实例对象的引用。借此访问子组件的属性。

父子组件属性传递：
父组件向子组件传递数据：
父组件通过属性传递数据 子组件通过props接收数据
子组件向父组件传递数据：
子组件通过emit('父组件模板监听事件名字',携带可选参数)；

组件参数校验与非Props特性

自定义校验器

给组件绑定原生事件

①父组件模板中为自定义事件
②子组件中定义的为原生事件

①的自定义事件需要子组件通过$emit()去触发才会响应

监听----触发

方法二：增加修饰符，表明该事件为原生事件而不是自定义事件，这样就不需要层层传递

非父子组件之间的传值
例如，1-3传值 3-3传值

①vuex
②BUS/总线/发布订阅/观察者模式

匿名函数导致this作用域发生变化，this指向全局作用域，所以事先应该保存this指向。

如何在vue中使用插槽

vue中的作用域插槽
当子组件中循环一组数据，但是如何展示，由父组件来决定。

父组件中使用模板时 最外层使用template包裹 子组件中要传递给父组件的数据通过v-bind：item=“item"
父组件通过slot-scope=”自定义命名“来接收子组件传递过来的数据

动态组件与v-once指令

组件第一次被渲染后，如果使用v-once指令，该组件就会被放入内存里。下次切换的时候直接从内存里拿组件，不用再重新创建。

第五章

vue中的动画原理
使用transition标签包裹元素

给元素增加的样式

vue帮我们实现了过渡的效果

在vue中使用amimate.css库
amimate.css是对keyframe的封装
官网下载css库，用link引入
1.必须使用自定义属性名来引用
2.属性中必须包含animated的具体类

在vue中如何同时使用过渡和动画
定义总时长
vue不知道到底是以keyframe时长为准还是以过渡时长为准 需要指定 也可以自定义时长

vue中的js动画与Velocity.js结合
Velocity.js官网下载库
引入js

Velocity.js简化语法

vue中多个元素或组件的过渡
1.通过v-if/v-else mode指定过渡的动画效果 ，先出现，另外一个再隐藏

2.component的is属性切换

vue中的列表过渡

使用transition-group标签包裹

vue动画的封装

第六章 项目开发准备
1.安装node.js 会自动安装npm包管理工具
打开cmd 输入node -v npm -v 检测是否已经安装成功

注册码云（一个云仓库） 代码的版本控制 码云里创建一个项目

2.本地安装git 上官网 安装后 cmd输入git --version 检测是否安装成功
码云里线上git和线下git关联

（windows系统使用git bash 相当于进了linux小型操作系统）

码云里用ssh公钥关联

将码云的代码下载到本地，注意！要选择SSH的来复制路径
cmd切换到要克隆的路径

克隆后，本地就复制成功线上项目

下一步该在此文件夹中创建vue项目

安装vue-cli，已经安装后就不用再安装，直接init创建新项目

记得看一下webpack（最流行的打包编译工具）的相关内容（私下去补）
记得私下去看git相关内容

切换到要初始化项目的路径
webpack后面接要创建的项目的文件夹

按照指示运行

浏览器中运行

说明项目的整体环境已经配好啦
此时需要将初始化文件和线上同步

先将本地文件增加到git的缓冲区

本地代码都推到线上仓库了

单文件组件与vue中的路由

运行项目

单页应用以及多页应用

vue是一个单页应用 路由是由前端而不是后端来做。由js感知url改变
搜索引擎只认识html里的内容，不识别js里的
知识点：https://www.jianshu.com/p/4c9c29967dd6

项目代码初始化

1.

通过该设置让用户通过手指操作屏幕放大缩小是无效的。比例始终是1：1
2.reset.css
可以上网搜索该文件，保证在所有浏览器上显示出来的效果是一致的。

在main.css中引入该文件

3.解决像素边框问题，1像素边框的解决方案
多倍屏
引入border.css文件

在main.js中引入

4.移动端延迟300ms点击事件执行的问题
引入fastclick库，安装到项目的依赖中（在项目的目录下执行该命令）

安装到依赖里

私下补充npm或者node的学习
安装好后，重启服务

引入该库

5.移动端十分流行的iconfont
官网创建项目

补充：
git add .将代码保存到缓冲区
git commit -m ‘mesage’把本地缓冲区的代码提交到本地的仓库。-m是留一条信息的意思
此时线上代码没有任何改变
git push 把本地代码推到线上去

第七章 项目开始

私下去了解styless less sass
终端打开项目所在文件夹
安装css的管理包到项目的依赖里

重新启动项目 npm run start

scoped 只对当前组件有效，不会对其他组件产生影响

iconfont的使用和代码优化

私下了解iconfont

将解压后的这四个文件拖入项目的styles中，拖入自建的iconfont文件夹，并把iconfont.css也拖入。

修改一下字体引入的路径

在main.js中引入

使用图标通过复制代码

如果某个变量项目中会经常引用到，比如背景色很多地方都是相同的，那么就可以创建一个文件，将该变量写入，其他地方要引用的时候直接引用该变量，以后要修改只用修改一处就可以了，维护方便

上面那种写法太麻烦，@表示src路径，另一种写法（前面要加上~）：

如果某个路径经常被引用到，路径又长写起来麻烦，可以事先配置好简便写法，像@表示src一样

修改了webpack配置项后，要重启服务器，否则会报错

首页轮播图

企业级开发中，每开发一个新功能，要创建一个git分支，开发完成后，要合并到master主分支上。
创建一个分支

把线上分支拉到本地

现在本地分支就是新创建的分支了

查看当前分支状态

启动项目 npm run start
github上下载 ，创建轮播图

复制以下指令在终端运行

版本号

重启服务器
github中有说明如何在全局中使用该插件

引入以下代码，就可以有轮播图效果了

标签中绑定了变量，需要在data中自行声明。以及删除一些不要的标签。

注意！！抖动问题！！如果在轮播图下面再加个div，里面含有文本，当网速比较慢，图片还没加载出来的时候，文字处于上面，图片此时没加载出来不占位置。图片加载出来后，文字又被挤到下方。

解决办法：在swiper标签外再包裹一层div标签

添加div样式，根据图片宽高算出高/宽的百分比

高度相对于宽度会自动撑开31.25%
不可以直接设置height，因为height相对的不是自身的宽，而是父级的宽

另一种可行写法（有些浏览器兼容性有问题）：

知识点的补充：
(如果是在PC端好办，容器的宽高都写死是多少px，这样即使图片加载不出来容器都不会变型。但是在移动端，由于各机型分辨率相差太大，写死px是绝对不可能的，终究还得靠百分比来实现的)

在css里面，padding-top,padding-bottom,margin-top,margin-bottom取值为百分比的时候，参照的是父元素的宽度。
比如：父元素宽度是100px, 子元素padding-top:50%，那么padding-top的实际值就是100*50%=50px
这个小小的知识点，其实有很大的用处，应用也很广泛，就是进行提前占位，避免资源加载时候的闪烁，还可以让高度自适应。

一般来说，想要自适应屏幕大小，我们设置元素的宽度自适应是完全没有问题的，比如希望一行显示5个元素，那么我们设置每个元素width:20%就可以了（box-sizing需要为border-box）。
但是高度就比较尴尬了，因为高度都是被内容撑开的，一般不定，那么通过百分比来设置高度，就变得不是很实用。
而且，对于图片等资源来说，加载是需要时间的，即便网页加载速度已经很快了，由于高度被图片撑开的过程，不可避免会出现闪烁，这时候我们的padding-top等就发挥大用处啦。

使用vw ,即当前视口的总宽度window.innerWidth

轮播图对应页码小圆点显示：

传递了参数
填写配置项，传入pagination

小圆点默认是蓝色，修改为白色

通过控制台点击小圆点查看代码发现了控制小圆点样式的属性名

更改样式

然而没有用，因为scoped表示写的样式只对当前组件的class有用，对其他组件的class没有影响。
而swiper组件控制的小圆点class并不在当前组件里面，
将样式挪到最上面

样式穿透，wrapper里的该属性可修饰，不受scoped限制。

使轮播图可以循环拖动。
将线下分支同步到线上分支后。需要将该分支合并到主分支上，
切换到主分支

合并分支

将master分支也提交到线上

一般开发时，自己开发一个分支，经过测试没有问题后，就合并到主分支上。

图标布局

创建分支

略。。。

让图标实现之前轮播的效果

将之前组件的代码拷贝过来
发现组件轮播图可拖拽范围（高度）与只有一个图标高度那么高，

鼠标在靠下方的空白区域时无法拖动。
改变组件高度样式使拖拽范围与整个图标区域高度相同

根据数据项的不同，自动构建页码，来实现轮播图

将一维数组拆分成二维数组

实现文字过多显示...效果
很多地方要引用该样式
创建mixins.styl

推荐组件开发部分

创建新分支 index-recommend
如何实现底下有一个像素的边框
因为之前已经引入了border.css
所以直接引用里面的css属性即可

问题：flex布局下文字超出省略号代替不起作用
原因：在移动端在flex元素中的内容进行省略文字的操作，则flex失效，flex之外的内容宽度不受控制，图片宽度无法撑起
解决办法：给设置了flex:1;弹性宽度的div设置最小宽度为0可以解决此问题。

周末游组件

模仿上面

ajax获取数据

安装axios

提升性能：在主页上发送ajax请求，将返回的数据传给每个子组件，供子组件使用

vue的脚手架工具（该功能实际由webpack提供）会自动将/api该路径替换为static/mock，重启服务器

页面一挂载就执行该方法
私下去补充axios的知识
axios.get返回一个promise对象

ret表示正确返回数据

首页父子组件数据传递

在data中先声明要传递的数据，然后在then的回调方法中获取到该数据，并对data中声明的数据赋值。

通过v-bind传递给子组件。

子组件通过props接收父组件传递过来的数据
问题：轮播图默认是最后一张

原因：在还没有获取到ajax的数据的时候，轮播图默认渲染的是父组件传递过来的空数组

当ajax获取到数据，赋值成功后，子组件才重新渲染新数据对应的轮播图。一刚开始是根据空数组渲染所以导致了该问题
解决办法：让组件一刚开始就由完整的数据创建，当ajax还没有成功获取数据的时候不进行渲染。加一个v-if渲染组件的判断条件

阻止轮播图自动轮播：

第八章

城市选择页面路由配置

创建分支city-router

搜索框布局

创建分支city-search
略

列表布局

创建分支 city-list
设置上下边框 直接引用border.css样式

better-scroll的使用以及字母表布局

github上搜索better-scroll，终端在项目路径里安装

需要符合这样的dom结构

字母表使用flex布局

城市列表页面的动态数据渲染

遍历对象时 （item，key）注意 是key不是index 数组才是index

兄弟组件间联动

字母表和左侧列表是兄弟组件
希望点击右侧字母表左侧列表随着滚动

可以通过事件对象获取目标对象的文本值
兄弟组件传值 其中一个子组件传给父组件 再由父组件传给另一个子组件

子组件触发，父组件监听

父组件将文本值转发给另一个子组件，通过属性的形式传递

子组件 通过props声明来接收

借助侦听器知道letter的变化
执行某些事情

如果letter不为空
better提供一个方法 接收一个dom元素 滚动到某个dom元素上

由于是循环得到的，获取的是一个数组，需要加上索引（这是 vue 的特性, 自动把 v-for 里面的 ref 展开成数组的形式. 假设你的 ref 不是动态的, 而是静态的 ref="a", 那么不管你执行多少次循环, 最后 ref 只会有一个值, 所以 vue 为了处理这种情况会把 v-for 里 ref 转为 数组形式, 为了能捕捉所有的 ref 值.）

这样就可以实现字母表点击字母改变时，监听到字母变化，自动滚动到对应区域。

实现右侧字母表滚动事件的监听

需要一个标识位，表示是否处于点击状态

难点 如何知道点击字母表的时候点击的是哪个字母

如果想要根据下标找到对应字母，那么就需要一个数组来存储数组列表

clientHeight ：内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度

offsetop：obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置，整型，单位像素。

列表切换性能优化

A字母的offsetop的值是固定的，然而每次触发这个方法都会计算一次这个值，

1.在data中声明该变量。
并在update的生命周期钩子里计算该变量值。

为什么是在update的生命周期钩子里执行呢？因为字母这个组件的list值刚开始为空的时候会渲染一次。当ajax获取成功数据后，list被赋值又会渲染一次。当组件中被改动并挂载好后update的生命钩子会执行。所以写在该方法中。此时ajax已经获取到全部字母。
2.函数防抖流

当鼠标在字母表上来回移动的时候，touchmove执行的频率非常高，可以通过防抖来限制函数执行的频率。若一段时间内连续触发，只会执行最后一次。

城市搜索功能实现

显示搜索结果内容

通过绝对定位

将父组件ajax请求的城市数据传递过来

keyword为输入框搜索的关键字，list存储匹配结果，timer为函数防抖

对cities中spell和name进行匹配

实现匹配结果可滚动功能

获取匹配结果dom

如果搜索框内容为空，就清除匹配结果数组list

匹配结果的显示与否 由keyword决定 v-show

如果没有匹配项

使用vuex实现数据共享

点击该页面城市

首页这里的城市也会相应变化

这两个组件没有公用的父级组件

把公用的数据放到公用的存储空间去存储
如果某个组件改变了某个数据，其他使用到该数据的组件能够感知到。

可以把这个理解为一个仓库
State： 存储数据
不可以让组件直接改变state里的数据，组件修改数据必须先调用Actions，做一些异步处理或者是一些批量的同步操作。Actions再去调用Mutations，只有通过Mutations最终才能更改state的值。也不绝对。有时候组件可以越过actions直接调用mutations。
vuex其实就是一个单向改变数据的流程。
安装vuex

因为大型项目中vuex的文件可能很多很庞大，新创建store文件夹，创建index.js

引入store

每个组件中都可以使用store访问到。

给每个城市按钮绑定点击事件，并且将城市名字传递进去

ctx为当前上下文，借此可以调用commit方法
由于此项目中共享城市该功能比较简单，没有异步操作，没有必要使用actions。可以组件直接调用mutations。把actions删去。

在网页中实现页面跳转有两种方式
1.a标签
2.（js形式）window.location.href
在vue中 也是两种方式
1.router-link
2.（js形式）router.push

改变城市后，跳转到首页

vuex的高级使用以及localStorage

之前使用的vuex是有些问题的。如果原先state里存储的是上海，点击切换为三亚后，再刷新下页面，又会变成原来的上海。
这就需要使用localstorge来解决了。localstorage可以实现类似cookies的功能。实现本地存储。

注意，使用localstorage，有些用户可能会关闭了浏览器的localstorage功能，所以代码可能会抛出异常。最好是用trycatch包裹。

一般大型项目中都会把store的state，actions，mutation进行文件拆分。

简便写法，省去了写this.$store.state.city。mapState作用是将state里的数据映射到computed的属性里。可以映射数组，也可以映射对象。

意思是将state里的city属性映射到computed的currentCity属性。

映射到该组件方法。

演示一下getter的作用

vuex中getters有点类似于vue中的computed的计算属性，当我们需要根据state里的数据算出一些新的数据的时候，就可以借助getters这样的工具来提供新的数据，这样可以避免数据的冗余。

module 模块拆分 不同功能模块划分

使用keep-alive优化网页性能

每次路由切换的时候，ajax都会重新被请求发送

每次路由被切换到对应组件，都会重新渲染，所以mounted的生命钩子会执行，

所以ajax会重新获取。这样每次都重新获取，性能很低。获取一次就可以了，

包裹一层该标签。路由的内容被加载过一次之后，就把该内容放在内存中，下次直接从内存读取，不用再次渲染，不会再执行mounted的钩子函数。
但此时逻辑存在问题。当切换城市时，首页应该显示对应城市的内容。所以，如果切换路由，但是城市没有改变，就不发送ajax请求。如果城市改变，要再次发送ajax请求，

将city放入ajax的请求参数里面。
但由于之前配置了keep-alive
ajax只会在第一次加载页面时请求。
当使用了keep-alive是，会多一个生命周期函数activated。
该函数是当页面重新被显示的时候执行。

可以在该函数中判断，当前城市与上一次城市是否相同，如果相同则不重新发送ajax请求，如果不同则发送，注意，需要一个变量保存上次的城市。

第九章

详情页动态路由以及banner布局

希望点击故宫的时候可以进入详情页

router-link vue默认会把这个标签变成a标签 字体颜色又默认是蓝色，需要去修改样式，比较麻烦
另一种写法，把li标签直接变成router-link，通过tag属性声明此为li标签

做一个动态绑定，附加上id，当点击列表项第一个故宫，url会附加上id0001，这就实现了参数的传递

配置路由

通过冒号表示可以接收一个参数，参数放在id中，路径前面必须是/detail/

公用图片画廊组件拆分

点击后出现可滑动图片，且下面标有页码

考虑到项目中以后很多地方都可能用到这种效果，所以倾向于把他变成一个公用的组件，新建一个common文件夹

在webpack里再加一个共用画廊的别名

画廊布局css实现

为了有滚动效果，还需要使用之前的swiper插件
把之前的代码copy，修改

如何实现分页效果，图片下方有分页提示
去swiper官网查阅API

出现了分页提示，但是位置不太对

分页提示是绝对定位，修改css属性bottom为负值，使其位置往下挪，但依旧页面上没有显示出来。因为包裹它的父级元素设置了overflow为hidden。将这条删去。但是依然不行，

检查样式发现swiper的class属性中还有hidden样式。

图片资源由外部传入
default（默认资源） 必须是一个函数

由使用它的父组件传入imgs

画廊默认是隐藏的。只有点击的时候才会出现

！！！问题：但此时轮播图滚动显示有问题

因为一刚开始轮播图处于一个隐藏的状态，再次显示出来的时候，swiper计算宽度会有问题，导致轮播图无法正常滚动
解决方法：
进入swiper官网，搜索observeParents

作用：我这个swiper插件只要监听到我这个元素或者父级元素发生了dom结构变化的时候，自动的自我刷新一次，通过自我刷新，就可以解决swiper宽度计算的问题。
希望点击轮播图上下区域的时候轮播图可以关闭。

父元素监听

实现Header渐隐渐现效果

上下拖动的时候有个过渡效果。
想要页面可以滚动，页面必须足够长，加一个div撑开高度

给左边返回的箭头div通过v-show=showAbs来控制是否显示。header部分取反来显示。

让滚动高度在大于60小于140的时候开始逐渐显示。当达到1最大值的时候，就一直为1。给data里的style重新赋值。

之前设置了keep-alive ，所以每当页面重新显示都有这个钩子。

对全局事件的解绑

如果只是在标签上注册事件，则只是作用于该标签。但如果是绑定到了全局对象window上面，则对项目中所有组件页面都会有影响。

问题：上节中注册的全局事件在首页中依然在监听，在执行。
在使用keep-alive后，还有另一个钩子函数，在页面关闭/切换时，会执行。可以在这个钩子函数中进行全局事件的解绑。

使用递归组件实现详情页列表，多级标题

父组件传递list给子组件

组件名字的其中一个用处就是进行递归操作

如果item有children这个属性，就将其值作为参数传递给属性list，调用自己。
给递归的组件有个层级关系，加一个class属性，使其文字缩进

使用Ajax获取动态数据

之前已经定义，将参数存入id这个变量里，所以可以从route里获取id，但是拼接字符串写起来比较麻烦

另一种写法：

由于使用了keep-alive做了缓存。所以mounted只会执行一次。
导致点击其他的图片显示详情时，只有点击第一次会请求ajax数据，之后不会再次请求。之前是使用了actived的钩子。这次使用另外一个方法解决该问题。

通过exculde属性来表示Detail组件不做缓存
总结：组件name的作用：
1.递归时使用2.取消缓存时使用3.开发调试工具显示组件嵌套结构

滚动问题：
当首页面滚动到下面，然后切换到另一个页面，此时新的页面停留位置是之前的滚动位置，而不是头部位置。
解决方法：

进入vue官网，

在项目中加入基础动画

在common文件夹中再新建一个文件fade

以插槽形式增加动画

common-gallery会作为插槽形式替代slot
这样画廊显示和隐藏的就会有动画效果了

第十章 项目的联调，测试上线

vue项目的接口联调

当项目进展到前端的布局已经编写完毕，后端的接口也已经写好后，就需要把前端模拟的假数据变成后端返回的真数据，进行调试。称为前后端联调。
之前的配置8080写的是前端的端口：

而后台端口在80端口上。

这里的前后端服务器都在本地。而在真实的项目开发中，后端服务器不一定在本地。此时target里的url就不是localhost，而是其他地址。
通过proxyTable就可以把任何请求/api的请求转发给任何后端的服务器。

vue项目的真机测试

windows系统cmd运行ipconfig获得内网地址
在浏览器中输入

显示拒绝连接请求，说明8080端口无法被外界访问。
原因是前端的项目是通过webpack 的 dev server启动的，默认不支持通过ip的形式进行页面的访问。所以需要更改配置项

之前每次启动项目实际都在执行dev里这段话，启动一个webpack-dev-server，如果想让项目可以通过ip地址访问的话，

加上这句话就可以了
此时再通过ip地址访问就不会拒绝请求了。

这样可以通过手机直接通过内网来访问这个网页了
只要让手机和电脑在同一个局域网内就可以了。

在手机上测试功能时发现一个bug，

拖动abcd的时候整个屏幕会跟着上下滚动

加上事件修饰符，可以阻止该事件的默认行为。在一些低版本的手机中，会出现白屏的效果。可能有两种情况。1.手机浏览器上默认不支持promise。
解决办法：

这个第三方的包会自动帮我们判断如果浏览器不支持promise，会自动添加es6的新特性，
main.js中需要引入

2.第二种情况：以上方法依旧无法解决。此时不是代码问题，而是webpack-dev-server问题。webpack打包上线后，放到线上开发环境的服务器就不会有这个问题。

vue的打包上线

项目进行接口联调和真机测试后，就开始打包上线
首先在命令行里打开我们的项目目录

这时候vue的脚手架工具会帮助我们把src下的代码进行打包编译，生成一个能被浏览器运行的代码，这个代码是经过压缩后的代码

完成后，会显示bulid complete
这时再打开项目目录，项目里会多出一个dist文件夹

点开后

这些代码是最终要上线的代码。将dist目录挪出去。下一步把dist目录的代码给到后端的同学，后端的人会把这些代码放到后端的服务器上。
后台服务器根路径：

将打包编译完成的代码挪到后台服务器的根路径下

此时访问80端口 （默认端口是80）

会把默认的index.html文件显示出来。同时该文件有引入了打包生成的js和css文件。那么整个前端的代码就可以在后台服务器上运行起来了。同时后台又有提供的接口，最终将后端的代码上线，整个项目就完成了。
有时候希望打包文件并不在根目录下。在后端再建一个文件夹project，将打包文件挪进去

页面无法正常显示，路径有错误，此时需要打开前端代码修改。
配置默认是：此为bulid 打包配置项

修改为

此时cmd再重新运行一次npm run bulid 重新进行一个打包

完成后，项目里又会重新生成一个dist目录，将dist目录改名为project，放到后端服务器根目录中，这时再在浏览器中运行，就可以运行成功了

image.png

vue中异步组件的使用

合理使用异步组件，可以提升vue项目的性能

上节项目打包后生成的文件：

以map后缀的只是辅助文件，调试被压缩后的代码，只是调试时使用。无map后缀的才是真正项目打包上线后要用到的文件。

app.js 项目各个页面的逻辑代码
mainfest.js webpack打包生程的配置文件，不用关心
vendor.js 是各个组件的公用代码
在浏览器中通过后端服务器访问首页时，这三个js都会加载

实际异步组件讲的是app.js，该文件放的是所有页面的逻辑。
当访问项目首页的时候，其实只需要加载首页的代码就可以了，不需要加载其他页面的代码。可是现在以默认的形式进行打包的时候，访问首页时，请求的app.js将整个项目里所有页面的js都进行了加载。如果项目很大，那么app.js也会变得很大，这时就需要通过异步组件来优化性能。
当使用前端服务器运行项目，在开发环境下运行时，不会有mainfest的js，只有app.js，加载首页，直接请求app.js，一次性加载了所有页面的js

此时如果再切换其他页面，不会再发送请求，因为之前加载首页是已经一次性加载完了。
如果对此性能优化，改成按需加载，
之前代码：import都是写在最前面，先全部导入

修改：改成异步组件，component改成箭头函数形式，当路由切换了页面，需要该组件的逻辑代码js时，才去对应加载。

此时再加载首页

只会加载首页的js逻辑
再切换页面

再加载列表页所需的逻辑代码js
注意！当项目很小，js文件也会很小，这样使用异步组件的话，会导致http请求变多，发一个http请求的代价远大于首页一次性加载完一个很小的js的文件。就没必要使用异步组件了。
只要是vue组件，都可以进行异步加载。
以前同步加载的写法：

课程总结与后续学习指南

把vue官网进阶部分看完
vue-router的文档看完
vuex文档看完
服务器端渲染 ssr seo搜索引擎
vue官网推荐插件深入研究
vue源码研究
babel webpack es6