Vue实战项目细节补充

2020-08-02

1 fsakclick

在移动端点击有 300ms 延迟，下面是使用 fsakclick 的 ES6 语法

1）安装

1	npm install fastclick --save

2）main.js 中导入

3）使用attach函数

1
2
3

import FastClick from 'fastclick'
// 解决移动端点击的 300ms 延迟
FastClick.attach(document.body)

2 图片懒加载

图片懒加载：图片需要显示到界面时候再加载。

使用 vue-lazyload

1）安装 vue-lazyload

2）main.js 导入

3）Vue.use 安装插件 ,安装的时候可以设置 options

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',//加载失败
  loading: 'dist/loading.gif', //未加载图片的占位
    // 在 vue 中图片需要 require 导入
  loading: require('./assets/img/common/placeholder.png')
})

4）修改 img 的 :src —> v-lazy

1	<img v-lazy="img.src" >

3 移动端自适应 px2vw

px -vw px-rem

1）安装 postcss-px-to-viewport 插件

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

2）配置 postcss-px-to-viewport 在 postcss.config.js

现在移动端用的都是 retina 屏 (1点对应 2个像素)，比如iPhone6是750px，实际vw 是 375px；

模块不想转化 px

配置 selectorBlackList ，如下不需要转化像素的模块添加一个 ignore 的类就可以了。但是在最新版本这个方法没有继承，也就是给父元素设置 ignore ，只有父元素有效果，子元素无效。
配置 exclude ，可以把某个组件选中，组件内所有元素都不会转化，但是组件中的插槽不算。

module.exports = {
    plugins: {
        autoprefixer: {},
        "postcss-px-to-viewport": {
            viewportWidth: 375, // 视口宽度  对应设计稿 
            viewportHeight: 667, // 视口高度 对应设计稿（也可以不配置）
            unitPrecision: 5, // 指定‘px’转换为视窗单位值的最小小数位数（很多时候无法整除）
            viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
            selectorBlackList: ['ignore'], // 指定不需要转换的类
            minPixelValue: 1, // 小于或等于1px不转换为视窗单位
            mediaQuery: false, // 允许媒体查询分钟转换px
            exclude: [/TabBar/] //数组里面必须是正则表达式
        }
    }
}

【问题】

没有指定文字大小的字体，不会随着屏幕尺寸变大缩小，因此需要在根元素上设置 font-size
没有指定大小的图片，不会随着屏幕尺寸变大缩小，因此需要给图片设置宽度。
- 在 selectbutton 组件中，图片的大小会随着使用该组件的元素而变化，需要给该组件指定一个宽度，图片宽度设置为100%
页面塌陷问题，一般是部分元素的尺寸不对，超出了屏幕

4 在 window 下的部署

服务器：一台电脑（没有显示器和主机），24h开放，为用户提供服务

主机 —> 操作系统 —> windows/Linux —> tomcat/nginx(软件)

本地部署
远程部署