目录
- 归纳总结
- 如何运行vue项目（维护他人的项目）
- 前期学习
- 项目预热
- 项目实战-首页开发
- 城市选择页面
- 详情页开发
- 项目的联调、测试与发布上线
- 总结与后续学习
归纳总结
vue中组件的用法：
1.递归自己的时候
2.取消缓存的时候
3.网页上打开vue调试时用来显示名字方便看结构
插件
swiper3.0是Vue用的
https://3.swiper.com.cn/api/index.html
如何运行vue项目（维护他人的项目）
1：安装cnpm
由于npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所有我还需要npm的国内镜像---cnpm
在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org
2：安装webpack
npm install webpack -g
webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。 webpack 的核心是 依赖分析,把依赖分析出来了，其他都是细枝末节。
3：安装vue-cli
cnpm install vue-cli -g
vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板
，这个过程会耗时十几秒，等走完就好；好了，到此整个环境就搭建好了
4：cd /项目名称
下面就是运行项目了，cd /项目名称，我的文件放在D盘，所以先进入d盘，再进入项目。
5：npm install
进入项目之后安装依赖，安装成功
注意：在这一步可能会出现这样的错误；因为你打开的是别人的项目，项目之中肯定有 node_modules模块，那么先删除掉，在执行npm install命令
如果出现了，请参考这篇文章解决：https://www.jianshu.com/p/5e62d852babc
6：npm run dev
一切准备就绪，启动项目
npm run dev
7：自动启动浏览器就会打开项目了
在浏览器中输入http://localhost:8080/#/；进入项目首页
若是要访问其他页面，直接在#后面加上组件名称即可：例如http://localhost:8080/#/adjustIntegral
原文链接：https://blog.csdn.net/qq_36538012/article/details/81475913
零、简写
v-on:click——@click
v-bind——:bind 我们可以传给 v-bind:class 一个对象，以动态地切换 class
v-on——:on
使用MVVM进行开发时，重点在于建设M层（数据层），jq使用的是MVP（P为控制层）
VUE提供的创建全局组件的方法，前面是名字，后面是内容
定义全局组件及使用（父向子传值的方法）
this.$emit()事件的.$emit()方法去触发事件，第一个参数是事件名称，第二个参数是可携带的一些参数
@clicknow="clicknow" 通过事件绑定的方式执行了clicknow（后面的）这个函数
下面为组件定义的命名方法，上面是组件使用的命名方法
除了定义Vue的实例（根实例），vue中的每个组件也是一个实例
最下为“定义根实例，往上是定义了一个全局组件，--组件名，组件模板template--,当使用这个全局组件的时候，要记住前面是此组件的名字，例如，他的名字是item那么在应用此组件的时候
以$开头说明是vue实例的属性或者方法
销毁实例
前期学习
一、生命周期函数（11个）
定义：生命周期函数就是vue实例在某一个时间点自动执行的函数
注意：
- 当实例中已经定义了模板，就用模板去渲染，没有template的时候，实例会将el中所指定的范围自动当成template，
例如以下两张图的作用是一样的
生命周期函数不用定义在methods中
找到方法：官网-学习-API-生命周期钩子
二、模板语法：
{{ }} 也叫插值表达式，作用和 v-text 一样，但是v-html会内容进行解析
凡是v-啥的指令后面的内容都是js的表达式，例如
变成
三、计算属性，方法和侦听器
在三种方法同时都可以实现的情况下用computed表现最为优异，代码量少，完成的还好
1.计算属性computed（有缓存机制）
注意：如果计算属性所依赖的值未发生改变，那么调用缓存机制不重新渲染，依赖的值发生改变则重新渲染
2.方法实现：
方法methods也可以同样实现，但是
3.watch侦听器实现
方法：分别对需要变化的变量进行侦听，一旦变化就对当前的进行渲染，但是比较费劲
四、计算属性的setter和getter
1.getter
获取当前值，跟下图未设置作用没区别，计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter
2.setter
下图为获取/设置改变当前值图片
split( )函数的作用是：将函数传入的value值以空格分割赋值给数组arr，下面是将分割出的每个想分别传回给firstname和lastname
五、VUE的样式绑定
方案一：class的对象绑定
在class中定义activated，并在中定义.activated状态
在函数中使当前状态取反做到来回切换
方案二：用数组[acivated]，先置空
减少冗余用三元：
注意：通过class中添加数组可以放入多个类，可以实现效果的变更
<div id="root">
<div @click="handleDivClick"
:class="[activated]"
>
hello world
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#root",
data:{
activated :''
},
methods:{
handleDivClick:function(){
// if(this.activated === "activated"){
// this.activated = ""
// }else{
// this.activated = "activated"
// }
this.activated=this.activated === "activated" ? "" : "activated"
}
}
})
</script>
- 方案三：内联样式，以对象的形式
方案四：以数组的形式
好处是可以更加灵活
六、VUE中的条件渲染
1.v-if 和 v-show 的区别?
v-show性能更高，执行后相当于display = none ，而 v-if 会直接删除dom元素，使之不存在
2. v-if和 v-else-if 和 v-else？
注意：中间不能隔断
<div id="root">
<div v-if="show === 'a'">this is a</div>
<div v-else-if="show === 'b'">this is b</div>
<div v-else>this is other</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#root",
data:{
show:"a"
}
})
3.key值的应用
只有标记不通过的key值，vue才会重新渲染，否则有默认留用一样的东西的机制，不标注key值会遇到bug
图解：先显示邮箱名和输入框，进行vm.show=true后只显示用户名和输入框，但是上一次在邮箱名中输入的内容仍然在
七、VUE的列表渲染
1.key值
真实项目中用数据库中返回的id传给==key值==作为标识，以此来提高性能，不建议用index作为key值标识
2.数组方法
方法：push , pop , shift , unshift , splice , sort , reverse
注意：只有通过这些方法遍历数组才能直接在页面上改变数据，否则直接操作下标只能数据变化页面不变
例子：vm.list.splice(1,1,{id="333",text:"Dell"})
splice用法
（3个参数）：第一个是起始位置，第二个是删除项数，第三个是要添加的项到删除位置（与删除项数不必一致）
（2个参数）：splice(n,m) 从索引n开始删除m个，返回删除项组成新数组
改变数组的第二个方法是改变地址重新建立引用
3.template的妙用
如果此处用div页面会显示进行渲染，但是用template不会占位
4.对象的形式遍历key
注意：遍历对象时，v-for里面可以有三个参数==（item,key,index）==而遍历数组时只有==（item,index）==:key需要自己指定
5.set
1。除了在页面上将整个对象重新建立引用，更好用的是set法,下面是利用全局set
2。通过vm实例方法==vm.$set==
3。通过set方法改变数组中的数据
注意：到此处改变数组中的数据已是第三种，第一种是直接修改引用，第二种是利用.push方法
八、组件使用细节
1.is属性
解决在tbody中无法直接应用组件，需要将组件名给属性is才能识别。
定义灵活的组件内容时，在组件里再设“==data==”进行==return==
2.ref的使用
复杂特效时，需要用ref来操作dom,ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
获取dom
获取组件引用
注意：ref的引用方式与子组件传递参数父组件进行监听的方式
子组件：$emit('what') 父组件：@what='方法'
九、父子组件的数据传递
1.父组件向子组件传值
通过==属性名== 传递 有==：==为表达式 无为字符串 子组件用==props==接收属性名
<div id="root">
<counter :count='1'></counter>
<counter :count='2'></counter>
</div>
<script type="text/javascript">
var counter = {
props:['count'],
template : '<div>{{count}}</div>'
}
var vm = new Vue({
el:"#root",
components:{
counter:counter
}
})
</script>
注意：父组件传递过来的值子组件==不==能修改，只能通过==data==对象赋值一个==副本==给子组件再进行使用
2.子组件向父组件传值
十、组件参数效验与非props特性
解释：父组件向子组件通过content传递一些参数，子组件可以对其传递的参数做出约束，这种行为叫做参数效验
1.组件参数效验
简单效验
复杂效验
2.props特性和非props特性
2.1 props特性
子组件中==有==与父组件相对应的属性名
在页面的
标签中==不显示==父组件要==传递的属性== 在子组件的template模板中可通过=={{ }}==取得属性对应内容
2.2 非props特性（实际生产环境中用的少）
子组件中==没有==与父组件相对应的属性名
在页面的
标签中==显示==父组件要==传递的属性== 父组件属性值会显示在子组件的最外层标签的html的属性之中
十一、给组件绑定原生事件(.native)
注意：父组件定义的@click="方法"属于==自定义事件==，不能直接通过实例来触发，可通过子组件中模板里触发子组件的methods，再用$emit（'属性名'）传回给父组件，父再传给实例中的methods
总结：子组件监听到自身元素被点击，向外触发一个自定义事件，在父组件里又监听了这个自定义事件，但是这种办法==太麻烦==
简便方法：绑定原生事件可以直接在==实例的methods==中定义方法
十二、非父子组件间的传值
之前的温习：父组件通过==props==向子组件传值
子组件通过==事件触发==向父组件传值
Bus/总线/发布订阅模式/观察者模式
十三、VUE中使用插槽
1.父组件通过插槽可以更方便的向子组件插入dom元素
2.父组件中有传递那么即使
3.具名插槽
在父组件中定义==slot = " "==的名称，子组件中用==name==进行接收，通过这种方法可以一次性插入多个dom
4.VUE中的作用域插槽
注意：
1.作用域插槽在父组件中必须以====开头和结尾
2.声明从子组件接受的数据都放在==props==中
3.中间部分决定了接收到的内容要怎么进行展示
4.应用范围：当子组件做循环，或者某一部分的dom结构应该由外部传递进来的时候
十四、动态组件与v-once指令
1.通过点击btn实现互相展示隐藏
<div id="root">
<child-one v-if="type === 'child-one'"></child-one>
<child-two v-if="type === 'child-two'"></child-two>
<button @click="handleChange">改变</button>
</div>
<script type="text/javascript">
Vue.component('child-one',{
template:'<div>child-one</div>'
})
Vue.component('child-two',{
template:'<div>child-two</div>'
})
var vm = new Vue({
el:"#root",
data:{
type:'child-one'
},
methods:{
handleChange:function(){
this.type= this.type ==='child-one' ? 'child-two':'child-one';
}
}
})
</script>
2.动态组件
3.v-once定义静态内容，不用来回销毁dom因此效率性能更高
最终结果：
十五、VUE中CSS的动画原理
1.使用@keyframe自定义动画
注意：在元素显示过程中，.fade-enter-active一直存在，在在元素隐藏过程中，.fade-leave-active
十六、使用Animate.css库
1.引入文件animate.css
2.运用处前面加上==animated==后面加上具体动画名称
3.必须使用自定义class的形式（下方示例）
4.引用完就能使，上面style里的东西都可以不要了
十七、同时使用过渡和动画
加入type规定当有过渡和动画时以哪个时间为准
十八、js动画与Velocity.js的结合
官方网址：http://shouce.jb51.net/velocity/index.html
十九、多个元素或者组件的过渡
在transition上添加mode属性，如果参数为out-in：隐藏元素先执行，再显示，若参数为in-out先显示再隐藏
实现了动态组件间的过渡效果
二十、列表过渡
1.注意transition在使用时的命名方式
2.在循环一个列表的时候可以直接在要循环的父组件上添加==transition-group==进行包裹，相当于在循环出来的每一项都进行添加过渡效果
二十一、动画封装
1.利用css进行动画封装
props 可以是数组或对象，用于接收来自父组件的数据。
2.利用js进行动画封装（推荐使用）
因为利用js进行封装可以将此组件的所有动画效果完整的封装在一个组件里
项目预热
环境搭建：配置vue-cli脚手架
一、单文件组件与VUE中的路由
一个文件如果以==.vue==结尾，叫==单文件组件==
路由：根据网址不同，返回不同内容给用户
ES6语法中如果键和值相同，可以只写一个
然后通过这个区号helloworld组件
二、多页应用VS单页应用
1.多页应用
优点：对搜索引擎的排名效果好
2.页面之间进行跳转用====
3.VUE项目运用的是单页应用
缺点：搜索引擎排名效果差，因为搜索引擎不认识js中的内容只认识html中的内容，但是可以利用==服务器端渲染==等技术完善功能高效利用好VUE
三、项目基础配置
1.在index.html中设置移动端项目无论放大缩小比例都是1.0，用户不可以通过手指放大缩小
2.引入reset.css和border.css
解决页面基础样式兼容和边框一厘米时不同分辨率下手机的边框大小不同的问题
3.引入==fastclick库==解决300ms点击延迟问题
3.1：在终端中bash安装fastclick依赖
npm install fastclick --save
npm run start 重新运行项目
4.重新初始化构建项目
4.1：把list相关的无用元素删除
4.2：git add . 将文件放入缓冲区中 git commit -m 'project init' 提交文件到==本地仓库==并用-m稍加一条信息
git push 将本地仓库中的元素提交到远程仓库
项目实战-首页开发
一、首页header
1.安装依赖包
stylus： npm install stylus --save
npm install stylus-loader --save
重新启动项目 npm run start
解释前两张图：引用时
1.需要在子组件Herder.vue中定义向外暴露的组件名字
2.在父组件中用import引用能够找到该子组件的地址
3.在向外暴露的export default中加入components注册定义的子组件
4.在父组件Home.vue中使用该组件
2.标题
设计师给的是2倍稿，如果在网页上量是86px，那么到了手机上应该是43px，再换算成rem的格式
43px换算成rem=.86rem 32px换算成rem=.64rem
弹性布局 display:flex
二、iconfont的使用和代码优化
iconfont的引入
1.将所有==字体文件==放入==iconfont==文件夹中，并将==iconfont.css==文件放入styles根目录下
2.在需要引用的地方将==class='iconfont'==并且在官网上将图片的代码复制到相应位置
在styles里建立varibles.styl文件，专门放全局变量，例如页面整体统一的颜色
注意：样式引入样式要用==@import==，再在background处填入对应全局样式名
注意：可以将当前地址改为@默认src开头，但是若是==css引入css==前面必须加~ 变为==~@/==
给常用的文件夹起别名
接着把相应的都改掉
只要修改了webpack的配置项就需要重启服务！！！否则报错
三、首页轮播图
公司企业级github运用开发
注意：每开发一个新功能都要在码云上先建立一个新的分支，弄好之后再去合并到主分支上
1.新建分支
2.将分支同步到本地
2.1 git pull将线上与本地同步
2.2 git checkout index-swiper
2.3 git status查看确定默认分支
2.4 npm run start 重新启动服务
Vue-Awesome-Swiper插件快速开发轮播图
2.安装老版本方法
3.引入与运用
4.新建轮播图子组件
解决由于轮播图加载慢未撑开导致的下层元素跳动问题
在轮播图外层加class=‘wrapper’，设置padding-bottom距底部刚好是图片的高度
变更轮播图下面小点的颜色
支持循环轮播
提交代码到仓库并合并分支
git add .
git commit -m 'change'
git push
git checkout master 切换到主分支
git merge origin/index-swiper 将分支内容index-swiper合并到主分支
四、图标
1.创建分支index-icons
git pull
git checkout index-icons
图标区域逻辑实现
通过计算属性如果图标超过8个就显示在第二页
解决字符过长显示不全...效果
.css样式修改
overflow:hidden
white-space: nowrap
text-overflow:ellipsis
定义 -- 引入 -- 调用
五、首页推荐组件开发
1像素边框的使用
六、周末游组件开发
七、AJAX获取首页数据
其中有很多的方法：fetch函数、vue-resource、推荐使用axios
axios：易用、简洁且高效的http库
npm run start=npm run dev
此时，index-ajax分支上还未合并到index-recommend分支上，可执行git branch查看，再git merge index-recommend（合并到之前的）
发送 ajax请求
1.在home.vue中引入axios
模拟数据
1.在==static==建立mock文件夹，创建index.json对象，因为在整个工程中，只有static对象可以被直接访问
所以将本地需要用到的==模拟数据==都放在static文件夹中
2.在.gitignore中设置不会提交到线上的文件夹
3.重定向ajax地址
注意：配置过后要重新启动服务器
此功能是webpack-dev-server提供的
八、首页父子组建的数据传递
此处遇到问题
网页上接受不到ajax中传递过去的数据
城市选择页面
搜索框布局
列表布局
将border-topbottom这个元素的前一个元素和后一个元素的边框颜色都设置成#ccc
（控制页面上显示的一像素边框的颜色）
子元素若设置了float，那父元素必须要设置overflow:hidden子才可以被显示出来
Better-scroll的使用及字母表排序
1.安装
npm install better-scroll --save
2.使用
使用时html的结构必须是：外面一层，里面一层，最后是内容层 才符合要求
3.举例
4.ref获取dom
5.导入
注意一定要在mounted周期函数中定义，此时是dom已经加载完成的状态
6.使竖条内容进行居中
页面的动态数据渲染
ajax放到最外层的组件上做，这样一次就可以获取所有的内容
接收city.json数据的过程
是在config下index.js找那个进行了位置的重定向
父组件向子组件传值
子组件接收
双层循环调用ajax
此时ajax内容
兄弟组件间联动
兄弟组件传值 子传父父再传另一个子
第一个子向外触发事件
父组件city接收子组件Alphabet组件传递过来的
父组件city再通过属性的形式传递给另一个子组件list
父组件再传递给list一个letter
子组件list在props中接收这个letter
监听收到的letter，让组件中与letter相同字母的这些列表项显示出来
字母表拖拽时，左边内容会随之变动
左边上下滑动时，右边显示是第几个字母
看A距离顶部的位置，看手指滑动的位置距离顶部的位置，做差值，再除以每个字母的高度，就知道当前是第几个字母
列表切换性能优化
搜索功能实现
用v-show限制当List为0的时候才显示后面的内容
使用Vuex实现数据共享
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
中心思想：把公共的数据放到一个存储空间去存储，某一个组件改变了这个公共数据，其他的组件就可以感知到。
单项数据的改变流程
1.安装 npm install vuex --save
在store的index.js中存放公共数据
创建了虚线部分叫store,创建state区域里面，里面存了一个数据叫city，下一步需要组件来使用这个功能的数据
首先首页的header部分用到了该数据
之前此处的city的后端ajax返回的数据，现在想要只在前端进行存储
将home页有关于city的代码都去掉（有好几处呢）
思考：如何显示公共的外部数据？
此时页面上的数据已经是state中的内容，下一步：去==改变state中的内容==
实现了一点击热门城市下的城市，就派发dispatch修改了城市的信息
此时就完成了点击一个热门城市，就修改了当前城市，并且首页的header部分也随之改变
流程：组件调用actions -->actions调用mutations-->mutations去改变数据
注意：actions步骤也可以进行省略
vue-router
思考：希望点击“热门城市”为桂林的时候，不仅当前城市变为“桂林”，还要直接跳转到首页要用到==路由==知识
编程式的导航
两个页面间的联动到此结束
Vuex的高级使用及localStorage
localStorage实现本地存储，这个api比cookies更加简单，但是指的注意的是，只要用到本地存储，一定要在外层加上==try catch==！！！
因为如果浏览器关闭了本地存储的功能会使程序发生异常运行不了
将原本的index.js拆分成三个小类
键和值一样时可以进行省略，那么index.js内容就变成
当选择文字多的地点名时，header.vue样式发生变化
min-width
代码优化 mapState
把mapState通过计算属性进行映射，把city这个公用数据映射到叫city的计算属性之中
这里写成this.city就可以了
keep-alive优化网页性能
思考：每一次路由切换时ajax都会被重新发送一次
用keep-alive标签包裹入口函数，使得系统加载一次后就放入内存中，以后直接拿出以前的数据
思考：当地点改变时，应该重新发一次ajax请求，使得不同地点对应不同页面
引入
当使用keep-alive后，会多出一个activated的生命周期函数，使用这个函数，第一次进入首页时和mounted一起执行，重新显示时，只有activated执行。
判断当前城市和上一次ajax请求的城市是否一样，如果不一样，就再发一次ajax请求
详情页开发
详情页动态路由及banner布局
router-link直接用会默认将里面内容当成a标签，解决办法：把li标签直接换成router-link标签并在==tag==中声明为li即可
动态路由写法：path:'/detail/:id'代表路由后面携带一个叫id的参数
图片 加从上到下的==渐变==
未加前效果
加渐变后
公用图片画廊组件拆分
思考：画廊组件不止一个页面需要用到，所以存放成一个公共的文件夹下更加便利！
定义一个common文件夹存放公共组件
在Banner.vue中使用公共组件
实现Header渐隐渐现效果
以div的形式直接跳转到根路径用==/==
思考:当下拉滑动到一定高度时标题才显示，平时隐藏效果
渐隐渐现效果
每个元素可以绑定一个动态的style :style
对全局事件的解绑（重要）
问题出在对全局事件的绑定上，不是绑定在组件中，而是整个window对象上，假如console.log一下scroll发现造成每个页面都会对scroll进行输出
==activated的特性是在每一次页面展示时执行==
==deactivated的特性是每一次页面隐藏或并替换成新页面时执行==
使用递归组件实现详情页列表
说明：“递归组件”即组件自身调用组件自身，可以实现多级菜单
使用Ajax获取动态数据
想要发送ajax请求步骤
1.引入axios
2.mounted生命周期函数
更简洁的写法，后面加一个==对象==的形式
axios请求到数据后用.then输出结果
下一步将获取到的数据替换到之前写死的数据
问题解决详情页面不同数据分别展示不同内容，不做缓存
办法：除去不想进行缓存页面的名字就可以了，不被缓存后mounted这个生命周期钩子都会被执行
利用前详情页点进几页都只发id为1的，除去后重发送
解决bug
问题：拖动页面时，多个页面间会互相影响？
办法：找到vue-router官网-->滚动行为
在项目中加入基础动画
思考：在显示轮播组件时渐隐渐现
图例
注意：建在公用的地方方便重复使用
VUE经典的自带的动画效果
在其他组件中引入该动画效果
注册组件
运用组件
common-gallary会以一个slot的形式插入到FadeAnimation里面，从而加上动画效果
项目的联调、测试与发布上线
vue项目接口联调
说明：此时前端项目都以测试完成，但是之前的数据都是mock中调用json的模拟数据，需要在此处将模拟数据去除掉都换成真实的后端数据
只要在我的开发服务器上面请求/api地址，都会被转发到后台服务器上面（此时后台服务器地址是本机）
在==proxyTable配置项==中修改后台地址
如果需要接入的是别人提供的api，那么在target中写上那台主机的url地址
Vue项目的真机测试
1.用ipconfig获取当前电脑在内网中的Ip地址
我的前端项目是在webpack dev server启动的，webpack dev server默认不支持Ip的形式访问
修改package.json文件中的scripts中的dev
bug：在手机上测试时页面随着字母表的拖动跟着动
办法：组织touchstart的默认行为
bug:解决不同手机型号，尤其低版本不支持promise时访问出现白屏问题
办法：安装包npm install babel-polyfill --save，此包会判断手机里是否支持promise，不支持的话会自动安装
ES6的新特性
在代码的入口文件中引入babel-polyfill这个包后在所有的浏览器中就都可以支持了
vue项目的打包上线
1.在项目文件夹中打开命令行输入==npm run build==,vue的脚手架工具会自动将src下的文件进行打包编译，帮忙生成能在浏览器运行的代码，是压缩过后的代码
==dist文件夹==是打包后的代码（要上线的，把这个给后端）
2.将dist文件夹里的内容扔到后端项目的根目录里
后端提供了一个后端的接口
如果不想直接放在根目录里，就得通过==index.js==中的配置项修改到那边的文件夹名称
Vue中异步组件的使用
manifest.js放配置文件，可以不关心里面的代码
vendor.js放各个组件公共的代码
app.js放各个页面的业物逻辑代码
bug:因为在打开首页时就会把app.js这个文件（所有业务逻辑）全部加载，文件过大就会产生问题，所以就要用异步组件
1.找到router下的index.js把组件引用变成箭头函数的形式做到按需加载
总结：用不用异步组件进行页面逻辑的拆分要看app.js这个文件是否特别大，如果不大，那么每次加载一个新页面会重新发起一次http请求，还不如不用
组件里也可以用
总结与后续学习
1.通读一遍vue官网扫边缘
2.学习核心插件，VueRouter和Vuex Vue服务端渲染等将node.js理解较深再学
3.生态系统-->Vue资源