写了发现内容会很多。。。全部写在一篇里感觉看不懂所以分两篇...下篇完结，有兴趣的朋友可以继续关注=>Vue开发仿旅游站webapp项目总结（下）温馨提示本文只是一个操作/思路，个人完成后可以总结项目。长期接触vue的朋友应该有所收获。本项目也是萌新的第二个Vue项目，使用脚手架工具（vue-cli2.x不是3），有时间看的前辈老手，有写得不好的地方还请多多指教！~结果预览只实现了项目首页、项目详情页、城市列表页组件的页面/逻辑。先不要点击我的项目初??始化生成带脚手架的项目框架。因为我们做的是移动网页，所以可以有一些配置：第一步配置meta标签index.html，添加meta标签：在网页的标签中加入以上代码，让网页的宽度自动适应手机屏幕的宽度。其中：width=device-width：表示宽度为设备屏幕的宽度initial-scale=1.0：表示初始缩放比例minimum-scale=1.0：表示最小缩放比例maximum-scale=1.0：表示最大缩放比例user-scalable=no：表示用户是否可以调整缩放比例。我上面设置的参数的目的是：我想一打开网页就自动显示原始比例，不允许用户修改和缩放。第二步是初始化默认样式。在不同的手机浏览器上，一些默认的样式是不同的，统一的。我们需要统一这些不同手机的初始化风格。所以可以引入一个reset.css，这是一个初始化代码，一些初始化配置可以根据自己的需要修改。如果你想看/拿代码，你可以从我的Github上获取：src/assets/styles/reset.css第三步，解决1-pixelborder的解决方案。在开发移动端页面时，经常会出现1像素的边框问题。也就是说，有些手机的屏幕分辨率比较高。如果我们在页面上写border-bottom或者其他样式，会导致那些屏幕分辨率高的手机将1px边框显示为2px边框或者3px边框显示为多像素。为了解决这个1-pixelborder的问题，我们引入了border.css（好像这是哪个团队提出的解决方案？忘记了，我只知道怎么用。。。不过还是要表示一下感谢.还有其他的解决办法，这个是我自己搜的。）两百多行就不贴了。如果想看/获取完整的代码，可以去我的Github：src/assets/styles/border.css这个方案的具体用法看过border.css代码的同志们会觉得很简单：添加如下内容根据所需的要求为元素命名类。就从字面上看吧。例如，如果你想给一个元素添加一个一像素的底部边框，只需要添加一个类名："。要为元素添加单像素的上边框和下边框，只需添加类名：。边框的颜色也可以更改。举个项目中的例子按照这个格式改变颜色（本文例子中如果有css代码，基本都是用stylus写的）：对应页面：第四步，在开发中引入fastclick库移动端，在部分机型和部分浏览器上，点击事件会延迟300ms。为了解决这个问题，我们引入了一个fastclick库npminstallfastclick--save--save意思是：安装好的库无论是在开发环境测试还是在线运行代码都可以使用。并且下载完成后会自动存储到package.json的dependencies属性中，比如这里install的fastclick:然后在入口函数main.js中引入使用：importfastClickfrom'fastclick',fastClick.attach(document.body)五步配置使用iconfont首先在阿里巴巴矢量图标库中创建项目，然后在iconfont上购买，添加到购物车，选择后添加到自己的项目中，然后下载到本地。你只需要在下载的东西中使用这些东西：然后把iconfont.css放到一个文件夹里，在入口函数main.js导入，就可以全局使用了。举个使用例子：注意类名要加上iconfont，然后这里span里面输入的代码就是你选择的图标的代码：第六步自定义目录。这一步其实应该穿插在项目过程中。列出来。在build文件夹下的webpack.base.conf.js中配置，如下图，圈出的就是我在项目中配置的。这样配置之后，就可以使用自定义目录了。比如按照我上面的配置，importsrc/assets/styles/border.css可以写成importstyles/border.css。我在首页开发中要记录的轮播插件的安装和使用就用到这里了。vue-awesome-swiper。首先安装：npminstallvue-awesome-swiper--save然后在它的文档中可以找到一些用法：由于每个页面都可能会用到轮播功能，所以直接在全局入口文件main中。js是导入的。然后使用：比如要使用按钮区域，需要配置参数。项目中根据个人需求，可以查阅其github文档，按需使用。这里值得一提的是：如果轮播下面有东西，比如这个测试。网速加载缓慢时，测试可能会先显示在最上面，打开图片后又跑回最下面。为了防止这种抖动，最好这样做：在carouselswiper上放一个wrapper-likediv，然后固定div的大小。例如项目中的轮播图片纵横比为364:97，约等于3.75，高度为宽度的26.6%。所以响应式开发可以这样设置div框的样式：现在vw单元的兼容性其实是可以的。有一个很兼容的方案：overflow:hiddenwidth:100%height:0padding-bottom:26.6%这个方法也是高宽的26.6%。实际上。.这个vue-aowsome-swiper组件目前没有出现这种抖动问题。.还有一个更改插件默认颜色的问题。例如插件按钮区域配置后，默认按钮颜色为蓝色小圆点。通过检查元素可以看出：那么我们添加样式来改变行是这样的吗？一般这个问题是不能接受的。。。因为scoped作用域，这个类的属性设置在原来的swiper组件下，不是我们这里设置的swiper组件。应该这样设置：表示在.wrapper下的所有类中，找到.swiper-pagination-bullet-active类。>>>表示穿透作用域，穿透其他组件的作用域。如果一行中的文字过多，则实现省略号效果。例如，这里是一个p标签。如果P标签中的数据过多，希望显示一个...省略号。可以这样使用text-overflow属性：要实现溢出时省略号的效果，应该定义两种样式：强制文本显示在一行（white-space:nowrap）和隐藏溢出内容（overflow:hidden)，只有这样才能实现溢出文字显示为省略号的效果。发送ajax请求一般是在mountedhook中发送ajax请求数据。想了解更多的生命周期=>request方法我写过一篇，自己看吧，我在这个项目中axios和fetch方法都写过。配置首先，在用vue脚手架工具生成的项目中，只有static目录（静态文件目录）可以被外界访问。我们将一些本地仿真数据放在这个静态目录下，并创建一个文件夹来存放数据。这个项目是static/mock/index.json：这个数据是本地的模拟数据，我们当时不想一起push到线上，可以在.gitignore中这样配置：现在这个文件夹里的都是不会在网上发布。当然不会提交到本地的git仓库。这个配置还不够。目前在本地根组件中写入请求的路径是这样的。以项目为例：当我们启动这段代码时，最好在我们请求的URL前面加上一个'api'，如下图红框内：/api/index.json这样最好。好在vue脚手架中有这么一个转发代理的功能。通过这个函数，可以实现上面的想法。在config配置文件下，有一个index.js脚本。官方为我们提供了一个proxyTable{}配置项。我们可以这样配置：意思是：当我们请求api的时候，还是映射到本地的8080端口，然后在访问任何以api开头的url时，做一个路径替换，代理访问/static/mock。实际上这个功能是由webpack-dev-sever提供的。修改配置文件后，需要重启服务器。重启之后，就可以请求数据了，如下：这里实际访问的是static/mock/index.json中的内容。优化如果可能的话，最好在本地根组件请求一次ajax数据，然后将接收到的数据从本地根组件传递给每个本地子组件，而不是每个本地子组件发送一次ajaxask。在城市列表页的开发中，想记录一个box-sizing的应用场景：border-box。这是这样写的css。现在当输入框中输入的文本字符超过输入框大小时：这两部分会被粘贴，不太好看。.如果要给这个输入框加padding，最好留点空隙。但是你直接在输入下面添加行吗？page：因为包裹输入框的div没有设置宽度，即宽度为auto。输入框的宽度设置为100%。如果直接给input加上padding，会扩大输入框的宽度。所以会溢出。那么如何解决这个问题呢？我们只想设置一个左右padding值，不想改变输入框的长宽。因此，我们在Input下添加一个box-sizing:border-box。这样我们直接给input设置的宽高就包含了padding和border的宽高。这时候如果我们要修改padding的值，只会在这个frame范围内变化，不会扩大frame的宽高。当使用第三方插件better-scroll初步开发列表栏中的页面时，此时由于该区域添加了较多的字母，当页面有滚动条时：为了更好的使用-滚动库，我们只让列表区域显示到刚进入页面时可以显示的区域即可，不需要出现滚动条。所以你可以在包裹整个列表区域的最外层框架div.list中添加overflow:hidden。（整个列表页指的是下图中从当前城市开始到结束，城市选择和输入框是其他子组件写的。）接下来，better-scroll的具体用法在其github上的文档中说明.检查使用情况。字母表的逻辑实现思路在点击事件中，当我们需要查看点击的内容时，可以使用点击事件的事件对象在Vue的一个点击事件中，methods定义点击方法时，这个方法可以接收一个参数e，e是我们的点击事件对象。获取我们点击的事件对象的内容，可以这样：e.target.innerText在项目中举个例子验证一下：比如页面点击了DFJ。需求1当点击对应的字母时，列表组件显示城市对应的区域。第三方插件better-scroll有方法可以满足这个需求。思路是：监听被点击的字母表中字母值字母的变化。一旦字母发生变化，使用better-scroll提供的一个接口，如下图下划线部分会让better-scroll的滚动区域自动滚动到某个元素。这个方法需要传递我们滚动到的元素的DOM。利用这个思路，可以实现需求1。需求2用手指拖动字母，字母对应的列表会连动显示。思路：使用touchstart、touchmove、touchend事件，给一个限制（touchStatus），让一些操作只在手指在屏幕上移动时才执行。然后用一个数组letters来存放英文字母的所有字母，这里的字母大概是['A','B','C'...]，让页面v-for字母显示对应的内容.之所以将这些字母存储在一个数组中，也是为了实现这个需求的主要思想：根据下标找到对应的字母。接下来，首先使用offsetTop从包装器的顶部找到字母表中字母A的高度。下图红框。这里的74代表红框的高度。然后获取手指移动时的高度，这个高度就是client的高度，使用clientY。touchmove事件有一个事件对象，事件对象中有一个touches数组，touches[0]包含当前手指的信息，包括clientY属性。实时获取我们手指的位置。我们要获取到wrappingblock距离的高度=>即headers区和serach区的高度必须减去clientY的高度。这两个区域的高度是79px。然后计算我们移动到的字母在数组中的下标。逻辑是(touchY-startY)/每个字母的高度，将结果向下取整。最后将letters数组中下标对应的字母传递给需求1所在的组件，使用需求1的思路。（这里的传值涉及到兄弟组件之间的传值，此时页面比较简单，不推荐使用vuex，可以使用事件总线/找同父组件做媒体传值。具体方法是百度。）在我的项目中，finally逻辑代码是这样写的：最后做一个最佳实践，用一个if来保证索引的取值。性能优化第一个handleTouchMove会在手指滑动的时候执行，我们frame的高度是Aletterfrompackagebox是固定的，所以不用每次滑动都执行这段代码。所以这里需要优化一下，像这样：在data中初始化startY为0，然后使用updated的生命周期钩子执行给startY赋值的语句。为什么在这里使用更新的钩子？字母表组件alphabet.vue在项目中第一次渲染时，其父组件City.vue传过来的值是一个空对象。City.vue中的ajax动态获取数据后，City传给Alphabet的值由初始的空对象改变数据。数据更新后，触发updatedhook。这时候给startY赋值就意味着所有的值都有了，只会赋值一次。第二名：函数节流通过函数节流来降低handleTouchMove()的执行频率（因为我们手指滑动的时候这个函数执行的频率非常高）。如何使功能节流？通过定时器和清除定时器实现。先把数据中的timer初始化为null，然后用timer对function进行节流，方法是：如果你已经在这样做了，我会延迟16ms再执行。假设你在这16ms内再次滑动手指，那么它会清空你上一次要做的操作（clearTimeout），然后重新执行你这次要做的操作（等于以最终手指位置滑动为准）。通过这种函数节流方式，函数的执行次数会大大减少，从而提高网页的性能。当一个函数需要执行多次而缩减没有效果时，函数节流的方法就很有必要了。LocalStorage大概率可能是用户关闭了本地自动存储功能。一般我们在使用localStorage的时候，一定要使用trycatch代码块，这样即使用户关闭了本地自动存储功能，也不会导致整个代码无法运行。只是localStorage的功能没有了。给大家举个项目中的例子：第一部分结束，未完成的部分待续……
