项目中遇到的问题

时间格式化。在 js 中，默认没有提供时间格式化的 API，我们可以使用第三方提供的时间库。如 dayjs、moment.js。
混入（mixin）。什么是混入，相当于继承，可以将对象中的公共属性，方法等提取出来。在项目中的 Home 和 GoodsDetail 中用到了混入。更多请见 Vue 官网。
$nextTick()$ 。当 DOM 被渲染完成之后，会调用这个函数，即会执行这个函数中的回调函数。
```
this.$nextTick(() => {
  // ...
})
```
DOM 渲染完成不等于网络请求完成，网络请求完成不等于图片加载完成。
better-scroll 的滚动 bug（不是突然不能滚动，而是在鼠标滑动的一瞬间出现抖动），可以通过设置 probeType 为 2 或 3 来解决。

封装自己的插件 toast

// main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'
import store from './store/store'

import toast from 'components/common/toast'

Vue.config.productionTip = false

Vue.prototype.$bus = new Vue()

// 在使用 use 方法时，Vue 会自动调用插件的 install 方法
Vue.use(toast)

new Vue({
  render: h => h(App),
  router,
  store
}).$mount('#app')

// toast/index.js

import Toast from './Toast'

const obj = {}

obj.install = function (Vue) {
  const toastConstructer = Vue.extend(Toast)
  const toast = new toastConstructer()
  toast.$mount(document.createElement('div'))
  document.body.appendChild(toast.$el)
  Vue.prototype.$toast = toast
}

export default obj

解决移动端 300 ms 延迟，使用 fastclick

npm install fastclick --save

然后只需在 main.js 中使用即可。

// main.js

import FastClick from 'fastclick'

FastClick.attach(document.body)

图片懒加载 vue-lazyload

npm inatall vue-lazyload --save

// main.js

import VueLazyLoad from 'vue-lazyload'

// 后面的配置项是可选的
Vue.use(VueLazyLoad, {
  loading: require('./assets/img/common/placeholder.png')
})

<img v-lazy="item.image">

提示

见 vue-lazyloadopen in new window。

移动端适配，px2vw 插件

npm install postcss-px-to-viewport --save-dev

然后在项目根路径下创建文件 postcss.config.js，内容如下：

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px-to-viewport": {
      viewportWidth: 375, // 视口的宽度，对应的是设计稿的宽度 / 2，一般为 750
      viewportHeight: 667, // 视口的高度，对应的是设计稿的高度（也可以不配置）
      unitPrecision: 5, // 指定 ‘px’ 转换为视口单位值的小数位数（很多时候无法整除）
      viewportUnit: 'vw', // 指定需要转换成的视口单位，建议使用 vw
      selectorBlankList: ['ignore', 'tab-bar', 'tab-bar-item'], //指定不需要转换的类，其实是通配（如 tab-bar-xx 也可）
      minPixelValue: 1, // 小于或等于 ‘1px’ 不转换为视口单位
      mediaQuery: false, // 是否允许在媒体查询中转换为 ‘px’
      exclude:[/Tabbar/, /TabBarItem/] // 不需要转化的组件文件名正则，必须是正则表达式
    }
  }
}

参考

postcss-px-to-viewportopen in new window。

axios 使用 POST 传参，后端获取到的参数始终为空

# 安装 qs
npm install qs

import {doPost} from 'utils/request'
import qs from 'qs'

export function loginWithPwd({account, password}) {
  return doPost({
    url: '/login/ap',
    // 解决 POST 传参后台无法接收
    headers: {
      'Content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
    },
    data: qs.stringify({
      account,
      password
    })
  })
}

不发送请求
描述：前端在带有参数的情况下，不会向后台发送请求（使用了 qs），但是不带参数就能发送。
解决：查看是否引入了 qs 模块（不引入的话也不会报错，坑）。

# 项目中遇到的问题

项目中遇到的问题