使用Vue开发一个仿旅游站webapp项目总结（上）需要说的在上一篇已经说明了。感谢上篇评论区的一些同学~很受鼓舞，但是下一篇下一篇估计就没了。这次总结之后，下一篇、下一篇可能就是以后学习之旅的总结记录。还有一些话要说。长期接触vue的朋友应该有所收获。这个项目也是萌新的第二个Vue项目。它使用脚手架工具（vue-cli2.x不是3）。前辈老兵有空看完，有写得不好的地方还请多多指教！~项目中Vuex底层使用较少是因为这里只是总结一下操作/思路，没有一步步讲解代码，不如先给个官网图，这样就可以了方便看：前提假设在脚手架中，我们引入全局和路由方法是一致的，全局引入Vuex。创建一个文件夹存储，并在该文件夹下创建一个index.js脚本。在store/index.js中写一些Vuex的使用逻辑，然后在入口函数main.js中引入。如下：先忽略马赛克...在入口函数main.js中引入：此时index.js中的逻辑拆分以本项目为例。随着项目的发展，index.js中的逻辑会越来越复杂，所以选择拆分。因此，我们创建两个脚本（state.js、mutations.js）分别存放这两段代码。然后在index.js中引入：这样拆分就完成了，简洁多了。mapState辅助函数在项目中，如下图获取州内城市的数据，是不是有点长？Vuex为我们提供了一个方便的API->mapState这样使用：mapState的意思是我把State区的公共属性值映射到这个计算属性上。这里是：将state中的公共属性city的值映射到这里计算出来的属性city。这样就可以变成一个可以直接调用的计算属性：...mapState({}/[])可以是数组也可以是对象。如果是数组，那我们相当于直接给计算出的属性city命名，和公共属性的名字一样。如果是对象，我们可以自定义计算属性的名称。以...mapState(object)为例：这里也可以改变当前城市：这里是将对象传递给mapState，相当于将公共属性city的值映射到计算属性currentCity。这时候可以这样用：不用写的那么复杂。mapMutations辅助函数可以利用Vuex提供的API简化如下代码：这样：mutations中有一个函数changeC2()（这个名字...只是为了测试，轻喷）。我们想在组件的突变中调用这个函数来改变公共数据区状态中的值。使用mapMutations可以在组件中简洁的调用。这是什么意思？突变中有一个名为changeC2的方法。这里，在组件的方法中，mutations中的changeC2方法映射到组件中方法的changeC2方法。...mapMutations()参数也接受[]/{}。还是用...mapMutations（对象写法）稍微了解一下比较好，如下，做个测试：（乱入的小姐姐~）这样写也是可以的。这里的映射也更容易理解。本项目没有使用Getter、ModuleGetter和Module。Getter如果我们想根据状态值通过一些计算得到一个新的值，我们可以使用getter来提供新的数据，避免数据冗余。它的定义也和computed一样。getter可以被认为是商店的计算属性。就像计算属性一样，getter的返回值根据其依赖项进行缓存，并且仅在其依赖项的值发生变化时才重新计算。Getter接受状态作为它的第一个参数，也可以接收其他的getter作为第二个参数。可以通过属性（store.getters）访问，可以通过方法访问，还有mapGetters辅助功能（这个辅助功能主要是映射关系，将store中的getter映射到本地组件的computed属性）。官方文档给出的例子也比较通俗易懂，大家可以自行阅读文档。在ModuleModule的情况下，它几乎没有被理解。Vuex允许我们将商店划分为模块。每个模块都有自己的状态、突变、动作、吸气剂，甚至嵌套的子模块。当应用程序变得非常复杂时，您可以使用Module来防止存储对象变得非常臃肿。我认为Module的具体应用只有在复杂的项目中实践过才能熟练。目前不敢轻易开始记录，暂时做个笔记。使用keep-alive优化性能，我们在开发者工具网的xhr中可以看到，每次切换路由（从Home组件页面到City组件页面，反之），都需要发送ajax请求数据。这样就重复请求了ajax数据，因为每次路由切换到一个组件，都要重新执行组件钩子函数。如果组件在mountedhook中请求ajax，则每次路由切换时都会执行。.这个性能不好。此时可以使用Vue内置的keep-alive标签进行优化。在全局根组件App.vue中，代表显示当前路由的组??件，在这外面添加一个vue内置的keep-alive标签后，可以实现这样一个功能：我的路由的内容就是加载一次后，我的路由中的所有内容都会被放入内存中。下次输入这条路由的内容时，只需要从内存中取出之前的内容即可。此时无论路由切换多少次，ajax数据请求都只有两次。因为使用了keep-alive标签，所以有新的生命周期函数activated（在keep-alive组件被激活时调用）和deactivated（在keep-alive组件被去激活时调用）。后续路由切换不再请求ajax数据，因为组件内容是从内存中取的，不会重新创建，相应挂载的钩子函数也不会再次执行。但是每次切换，重新显示页面时，都会执行activatedhook。这时候可以使用这个钩子实现一个需求：当你在列表页点击一个城市，切换回首页时，首页显示的数据对应的就是该城市的数据（意思是ajax只请求城市组件页面数据对应的Home），然后如果在列表页选择了与原Home相同的城市，则不会发送新数据的ajax请求。之前发送ajax请求的时候，直接是这样发送的：其实发送ajax请求的时候，应该是有一个参数的。该参数应该是Vuex中的公共数据。即当点击一个城市时，该参数为对应城市的名称。请求中如何带参数？在请求的连接后添加?=参数数据。例如：在网页上试试，发送的参数如下。页面上的城市是否与上次显示的城市相同，如果不相同，则发送ajax请求，然后我们设置一个空字符串lastCity（作为判断的中间缓存值），然后在页面加载时，我们给它赋值当前页面的城市数据。然后当页面更新时，判断this.lastCity的最后一个值是否等于this.city更新后的值。不相等则发送新的ajax请求请求对应城市的数据，相等则不发送。至此，通过keep-alive新增的生命周期钩子函数和lastCity的缓存值实现了我们想要的功能。详情页我想记录下的实现图库组件功能的主要思路是看一张gif来说明这个功能长什么样子：这个东西。这是画廊。上面有一个旋转木马，下面有页码。因为这个不是只有一个页面用到，以后可能会被很多个页面用到，所以写一个全局公共组件Gallary.vue。你需要在详情页的组件Banner.vue中使用这个公共组件库来固定全屏。使用flex布局，让下面的wrapper区域垂直居中，然后使用vue-awosome-swiper第三方插件，先放两张图片，然后为那个.wrapper定义100%的宽高。按照下面的写法，width先是宽度100%，然后高度也是100%。意思就是对于这个宽度的宽度，所以这里定义的100%高度就是高度和宽度的意思。等宽表示正方形。此时page：让图片按比例适配正方形，然后去掉wrapper下的背景色，两张图片就可以正常显示轮播了：然后加上页码，其实这个页码就是按钮插件参数的区域和配置一起控制。首先添加按钮区域代码：vue-awesome-swiper插件是基于swiper实现的，分页等配置参数可以在swiper官网找到。我们去官网看看能不能找到配置我们页码要求的参数（当然能找到，不然我写点东西。。。）：可以看到这个页面的翻页样式对应于这个pagination中的paginationType在fraction中。现在要配置参数，首先将:options="swiperOption"添加到swiper。然后在data里面配置。首先配置buttonarea:然后配置paginationType'fraction'分数。现在有了，但是在一个小地方，你只能通过检查元素才能看到原来的框架样式。通过检查元素，你可以发现这是绝对定位。那么我们可以这样改变底部的-1rem吗？那肯定不行……这里有个坑。当你觉得代码是正确的但是页面不符合预期时，是时候重新审视元素了……审视元素，发现这个插件组件有一个swiper-container也定义了一个overflow:hidden.所以我们在gallery组件中穿透作用域来改变这种风格。gallery的逻辑部分很简单略过记录，不过有个坑值得一提。在gallery本身的gallery.vue组件中测试功能时是可以正常工作的，但是应该在详情页的Banner.vue组件中引入public组件gallary。那么问题来了。当我们在Banner组件对应的页面上点击gallery组件对应的页面时，轮播插件会出现计算宽高的问题。下面的gif图是这样的：要解决这个问题，需要在图库轮播插件的配置参数中加入这两个配置参数。添加这两个参数的意思是：我的swiper插件只需要监听我的元素，或者父元素发生变化时（监听的是swiper和swiper的父元素），插件会自动刷新一次，重新计算width和高度。通过这次自刷新，可以解决轮播插件计算宽高的问题。（可以去swiper官网了解这些配置参数的使用方法）看一个gif实现headerblock的淡入淡出效果。就提一下这一段，当手指向下滑动时，div景区详情框的逻辑会逐渐清晰，然后一直清晰。逐渐清晰的这块写的是固定定位的div框。逻辑一开始，v-show不显示div框并使div框的不透明度为0，并检测全局滚动（window.scroll事件），当触发滚动事件时，执行一个方法，逻辑写在这个方法中。写的逻辑是：当滚动条向下滑动60px时，让div框的v-show参数为true，使用公式letopacity=document.documentElement.scrollTop/140，让div框向下滑动时更清晰。度数越高，则根据以下语句将不透明度透明度值限制为1：opacity=opacity>1?1：不透明度。显而易见：document.documentElement.scrollTop的意思是获取当前页面滚动条的纵坐标位置。这个功能实现了，但是还有一个很重要的坑。全球事件的分拆。全局事件的解除绑定在header块的逻辑中，我们在activatedhook中定义了一个全局滚动事件。因为这是一个全局事件，我们也可以在其他组件中进行监听。这很容易导致一系列严重的隐藏错误。所以我们应该在detail下的header.vue组件中解绑组件：keep-alive引用对应的可以使用的hook也有一个deactivatedhook。当页面即将被新页面替换时，会触发此挂钩。所以这里我们使用deactivatedhook和removeEventListener函数来解绑全局事件。name属性在组件中的三个作用1.做递归组件时会用到。例如，列表组件的名称：'DetailList'。当你想在列表组件模板中使用递归组件来调用自身时，你需要根据名称的值将其作为标签（detail-list）来调用。如下：2.取消某个页面的keep-alive缓存时，会用到。假设有一个Detail.vue组件，它的名字是：'Detail'。当全局组件要keep-alive时，Detail.vue组件对应的页面，路由再次切换到这个页面，不用去内存取缓存值，可以使用Detail的名字的值组件如下：这个相当于除了Detail.vue组件，其他组件可以有设置keep-alive的功能。3、vue-devtools调试工具就是上图中红框内的组件名。这里的名字取决于set组件的name属性的值。在动态路由中，ajax动态获取每个路由目录对应的值。拿项目中的例子来说明。注意下图中红框内的值。这时我们应该获取的是动态路由中id为0002的参数的数据。这样设置之后，其实在动态路由中，相应的参数都会存储在这个变量id中。对于每一个请求，如果要给后端带上这个id，可以这样写：写法1现在在网络的XHR中可以看到，我们发给后端的请求是附加了一个id的我们把参数放在params中）：其实还是有问题的。这里我想一步步总结一下动态路由。仅仅动态添加一个id参数并不会自动让页面动态显示数据。动态显示数据还是要靠ajax来请求数据。目前该组件在mountedhook中执行ajax请求，组件受keep-alive影响。这样当路由跳转到id为0003/0004...的页面时，组件只会从内存中取第一次进入该组件某个id的页面。无法根据id对应显示页面。如何通过ajax请求动态显示数据？有两种方法，上面都提到了。首先是在列表页面选择一个城市，路由自动跳回首页后，首页需要显示这里已经记录的城市对应的数据。（温馨提示：使用activatedhook判断参数id是否与之前的id相等，不相等则重新执行ajax请求。）第二个组件中name属性的三个函数中的第二个函数已经说明了解决方案。这两种方法留给读者自己去思考。想不通的可以参考我github仓库里的代码。src/pages/detail/Det??ail.vue路由滚动行为看个gif这是路由跳转页面的影响。它会将当前页面（Home.vue）的显示宽高带到我们跳转到的页面（Detail.vue）。造成上图gif所示的现象。这是如何解决它。这在官方文档中称为路由滚动行为。我们现在希望每次路由切换到下一页时滚动显示在顶部。继续阅读文档。将这段代码复制到路由配置项中：这样就可以实现我们的预期需求了。一般后端数据写入后，我们不再使用自己前端模拟的数据，而是使用后端提供的数据进行调试。如果要访问服务器上的数据，需要在配置文件config/index.js下的proxyTable中将target改为服务器的地址（可以写内网IP地址或者域名外部网络）。然后如果你更改pathRewrite，你可以看到实际数据存储在服务器中的哪个文件夹。真机测试这里的前端项目是通过webpack-dev-server启动的，默认不允许通过ip访问内部服务器。所以我们需要修改默认的配置项。如果想让这个webpack-dev-sever可以通过ip访问，需要这样配置：（好像是少了。。。其实无所谓。。。）然后这里在真机上测试的时候，有时候会遇到一些在PC上开发时找不到的Bug，需要考虑兼容性。这个需要根据实际情况更改。打包上线在vue-cli2.x中，可以在项目目录下执行命令npmrunbuild。这时候Vue的脚手架工具会帮我们自动将src目录下的源码打包编译生成一段浏览器可运行的代码，而这段代码也就是压缩后的代码。打包完成后会生成一个dist文件夹给后端开发人员，或者直接把static文件夹的内容丢到后端服务器的根目录下就OK了。这只是一个基本操作。如果要改访问路径或者什么操作，自己找，想找就找。结论这篇文章仅适用于我这个项目。个人觉得可以总结记录一下。是的，更具体更详细的知识和过程，如果有兴趣，不妨去imooc支持一下DellLee老师讲的这门课程~有些地方代码太多，不方便贴出。如果想从代码中学习，可以进入我的Github。希望也能帮到你~
