WEB APP 可可爱爱购物街之第一个小项目学习总结~

项目说明

本次项目是跟随coderwhy老师练习的vue实战项目，主要目的是熟悉vue模块化，组件化，规范化开发，根据提供的测试接口完善了主要的五大基本模块：首页，分类，购物车，我的，商品详情

项目展示

源码奉上：[https://github.com/HANDSOME-YANGSHAO/cuteStroe](url)

学习到的东西

一：熟悉vue开发以及vue框架的编程思想

本次项目的接口是coderwhy老师自己用python爬下来并存到数据库中的数据，只是部分真实的蘑菇街案例数据，不过对于入门和熟悉vue开发是足够的！

正确的封装让代码有更好的可维护性和复用性！ 这次项目最主要的是学习了相关的编程思想，本次项目是以工程化开发，考虑到未来的可扩展性，对文件目录进行的严格的划分，不同项目使用到的通用组件划分到一个目录里，在当前项目里通用的组件划分到一个目录里，属于当前组件的子组件应当和父组件划分在一个目录里；亦如引入的第三方库，考虑到以后可能会不再更新或者维护，单独封装成组件或者功能函数，例如axios封装成的request.js文件和better——scroll框架封装成为的scroll组件，如果以后项目需要更换库，只需要在一个地方更改就行了，方便维护。能抽离的东西尽量抽离，“write less ，do more！”，比如重复的组件当然抽离出来方便复用，还有多个组件中有重复的东西可以使用vue的mixin混入抽离出来，比如本项目就把需要进行防抖处理的刷新scroll可滚动高度事件函数抽离到混入当中，当组件使用better-scroll并且需要实时刷新高度时可以给该组件部分混入防抖函数。

二：使用better-scroll框架对移动端的局部滚动条进行了优化

1：有何优势？

提升用户体验，滑动顺畅，封装了相关的下拉上拉事件等，具体阅读官方文档。 原生的滚动条在移动端是非常的僵硬，移到哪里就滑到哪里，当实际处理这样的需求的时候，如果采用原生滚动条要花费额外的成本对滚动条进行优化，比如拖动的惯性，滑动滚动条的惯性处理，然后滚动的弹簧效果，还有相关的对具有滚动条的容器监听上拉加载更多以及下拉加载更多的事件监听，这些效果在better-scroll框架中都帮你进行处理，提高了开发效率，并提升了用户的体验

2：带来的问题

会让scroll容器内部fixed定位的功能失效。在滚动条容器内部想要做吸顶的tabbar效果如果采用fixed粘滞定位会失效，在这个框架里监听不到tabbar 的top或者left等距离元素。解决办法： 本项目使用了狸猫换太子的做法，当scroll内部的tabbar滚到相关的offset位置，就让scroll组件外部的tabbar取而代之。

三：使用fast-click插件优化移动端点击响应

移动端300ms点击延迟触发背景

问题由来
这要追溯至 2007 年初。苹果公司在发布首款 iPhone 前夕，遇到一个问题：当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定，应对 iPhone 这种小屏幕浏览桌面端站点的问题。

这当中最出名的，当属双击缩放(double tap to zoom)，这也是会有上述 300 毫秒延迟的主要原因。

双击缩放，顾名思义，即用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。那么这和 300 毫秒延迟有什么联系呢？假定这么一个场景。用户在 iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作。因此，iOS Safari 就等待 300 毫秒，以判断用户是否再次点击了屏幕。鉴于iPhone的成功，其他移动浏览器都复制了 iPhone Safari 浏览器的多数约定，包括双击缩放，几乎现在所有的移动端浏览器都有这个功能。之前人们刚刚接触移动端的页面，在欣喜的时候往往不会care这个300ms的延时问题，可是如今touch端界面如雨后春笋，用户对体验的要求也更高，这300ms带来的卡顿慢慢变得让人难以接受。

解决方案

参考[https://zhuanlan.zhihu.com/p/69522350](url)

四：采用postcss-px-to-viewport插件做了移动端的适配

安装并配置相关文件

1：针对使用px像素开发并且相对当前设计稿的开发者

这个插件，比如此时你是用像素单位px进行开发的，并且针对此时的设计稿的设备宽度375和高度667进行开发的，此时你想要对
按此时这个设计稿设备的比例，对其它设备做一个适配，让其它设备加载的比例和此设备相同，我们就可以下载这个插件，然后
 对该文件进行一些配置，到时候插件会来查看该配置文件的信息，然后做一个单位转化，保持一个相对的比例，比如此时的img图片
 宽度37.5px，相对当前设备375视口宽度来看，就是10vw的宽度，换到其他设备也就是相同的比例
 如果是想转换成rem的话可以选择专门转化成rem的插件

2：可以一开始就使用rem进行一个适配

设置根元素的font-size 1rem就等于font-size的像素大小，一般可以设置100px方便设置，然后如果要实现比例适配的话，就让
根元素的font-size转换成当前设计稿下对应的vw，此时就实现了相应的效果


module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px-to-viewport": {
      viewportWidth: 375, // 设计稿视窗的宽度
      viewportHeight: 667, // 设计稿视窗的高度
      unitPrecision: 5, // 把px转化成vw单位的时候保留的小数位数，这里保留5位小鼠
      viewportUnit: 'vw',// 要转换的单位
      selectorBlackList: ['ignore'],// 忽略哪些类是不转换的，比如这里，直接让不想转化做设备适配，固定大小的dom加上一个ingore类名就可以了
      minpixelValue: 1,// 小于等于1px的就不做适配了，保留原有的像素
      mediaQuery: false, // 是否支持媒体查询
      exclude: [/TarBar/] // 必须要用正则，排除哪些文件不做单位转化
    },
  }
}

五：vue-lazyload插件实现图片懒加载

配置

1：npm下载插件

2：注册插件并配置相关选项参数

import VueLazyLoad from 'vue-lazyload'

// 图片懒加载,后面传入的参数对象是可选的，可去github上面看看有哪些可用的参数
Vue.use(VueLazyLoad, {
  loading: require('./assets/img/common/c.gif')
})

3：同时要把之前图片里面 :src= 换成 v-lazy=

六：手动封装一个toast组件

起初看到要封装一个toast组件，本以为是放在通用组件那里封装一个toast，写好相关的样式和方法之后，在每一个需要用到的页面组件内部引用并注册和调用这个组件，但这个toast组件其实类似于vue的$message一样，每个需要用到这个toast组件的页面组件都是让其显示在页面正中央的，也就是说理论上只用一个全局的toast组件就可以了，需要的时候让它出现，不需要的时候让它消失即可，所以这种情况我们选择注册插件的方式使用这个插件

1：写好toast组件（toast.vue）

组件内定义好相关的show和hide方法

  methods: {
    show(message, duration=1500) {
      this.isShow = true
      this.message = message
      setTimeout(() => {
        this.isShow = false
        this.message = ''
      }, duration) 
    }
  }

2：写一个index.js的入口文件

此方法导出一个对象，然后写一个install方法，install方法内部手动挂载这个组件实例对象，然后添加到文档种，等app挂载完毕之后就相当于id = app这个dom元素和这个挂载后的dom元素是并列级别的（注意：如果组件未挂载完成，组件对象的$el对象是空的，只有挂载完成才有值，并且是dom元素，可以把手动挂载函数和vue的生命周期函数mounted联想到一块，是一个道理的都是挂载）

// 导入toast组件
import Toast from './Toast'

const obj = {}

// 在安装组件的时候会自动调用install方法，并且向该方法内部传入一个参数
obj.install = function (Vue) {
  console.log('安装toast插件')
  // 1.创建组件构造器
  const toastConstructor = Vue.extend(Toast)

  // 2.new的方式,根据组件构造器可以创建出来一个组件对象
  const toast = new toastConstructor()

  // 3.将组件对象toast，手动的挂载到某个dom元素上面
  toast.$mount(document.createElement('div'))

  // 4.toast.$el对应的dom元素就是上述挂载的那个dom元素div（挂载到某个dom元素上其实是会把该组件对象的模板替换到该挂载元素的位置）
  // 上述模板被挂载到dom元素上之后才是实体node，此时组件对象的$el就是被挂载的模板（在此之前组件对象的$el是空的，且模板未被挂载），可以被放到document上的节点
  document.body.appendChild(toast.$el)
  
  Vue.prototype.$toast = toast;
}

export default obj

3:注册toast插件

在main.js中引入步骤2中的那个obj，并对其使用Vue.use方法，使用了use方法之后会去调实参的install方法

// 安装toast插件
Vue.use(toast) //use方法会调用该对象的install方法去进行一系列针对该对象的安装操作

七：小结

这个项目只能算是小试牛刀，还有很多功能因为接口的问题不能做完善，自己也模拟了一下其他界面该怎么写，到此vue2.0x的试炼告一段落，接下来准备学习vue3.0x的新特性，和相关的源码解读，先熟练掌握，精通一个框架，再用此框架走一个完完整整的过程是我目标，先把整个前后端联调体系建立起来，再去学习其他的工具框架，最重要的是好好回顾基础，踏踏实实的基础是的学习的根本，有志者，事竟成，坚定自己的选择！加油

vue项目练习之 可可爱爱购物街(WEB APP) 总结

WEB APP 可可爱爱购物街 之 第一个小项目学习总结~