【Vue项目复习笔记】补充细节

fastclick—解决移动端300秒延迟

如果说这个项目做完以后它是跑在移动端的，我们一般会使用 fastclick这个插件，它可以减小项目中某些东西在移动端点击的延迟。如果是浏览器上面某些东西做一个点击事件的话，它其实是有300毫秒的延迟的。fastclick它可以减小点击的延迟。

fastclick的使用

第一步先安装：

npm install fastclick --save
1

第2步导入main.js

import Fastclick from 'fastclick
1

第三步

//解决移动端300ms延迟
Fastclick.attach(document.body)
1
2

图片懒加载–vue-lazyload框架

什么是懒加载呢？用到时再加载。
什么是图片懒加载？图片需要现在在屏幕时，再加载这张图片。
在这个项目里面，我们发现并不是这样的，一旦有我们程序的时候就加载下面的30条数据，有了这30条数据，我们到时候就会创建一些image元素，一旦创建完这个元素，下面的图片早就加载好了，所以项目上的图片都不是懒加载。一次性加载很多图片的话，会浪费用户的流量，还会影响整个页面的性能。所以在移动端我们经常会将图片用到时再加载。
可以自己封装但是没有必要，所以我们这里用一下第三方的库vue-lazyload来做一下这个懒加载。
第一步安装：

npm install vue-lazyload --save
1

第2步在main.js中导入

import VueLazyLoad from 'vue-lazyload'
1

第3步是使用这个懒加载插件

Vue.use(VueLazyLoad)
1

这里用完以后，再加载图片的时候就不能按照以前的方式进行加载了。
第4步：修改
img：src -->v-lazy 比如：

 <img :src="itemInfo.image" alt="商品图片" />
1

变成了

 <img v-lazy="itemInfo.image" alt="商品图片" />
1

px2vw—css单位转换插件

为了移动端适配，我们可以使用postcss-px-to-viewport插件来进行px-vw的单位转换。
安装插件：

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

修改postcss.config.js文件，若没有新建该文件。修改配置如下：

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px-to-viewport": {
      viewportWidth: 375,//视窗的宽度，对应的是我们设计稿的宽度
      viewportHeight: 667,//视窗的高度，对应的是我们设计稿的高度
      unitPrecision: 5,//指定'px'转换为视窗单位值得小数位数（很多时候无法整除）
      viewportUnit: 'vw',//指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: ['ignore', 'tab-bar', 'tab-bar-item'],//指定不需要转换的类(样式的类名)
      minPixelValue: 1,//小于或等于‘1px’不转换为视窗单位
      mediaQuery: false,//允许在媒体查询中转换'px'
      exclude: [/TabBar/, /CartBottomBar/],//不进行单位转换的文件（数组中内容为正则表达式）
      landscape: false,  // 是否添加根据landscapeWidth生成的媒体查询条件 @media (orientation: landscape)
      landscapeUnit: "vw", // 横屏时使用的视窗单位
      landscapeWidth: 1134 // 横屏时使用的视窗宽度
    },
  }
}
// exclude中存放的元素必须是正则表达式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

nginx–项目在Window下的部署

项目做完以后，我们可能要对其进行部署，不管是在哪里部署，它也是在服务器里面执行某个命令，也是需要对我们项目进行打包的。
项目开发完成以后第一件事情就是打包。

npm run build
1

我们使用nginx进行部署。
第一：将自己的电脑作为服务器–>window–>nginx
window下载nginx:
其中包含很多的nginx版本，大致可以分成三类

• Mainline version : Mainline是Nginx目前主力在做的版本，可以说是开发版
• Stable version :最新稳定版,生产环境上建议使用的版本
• Legacy versions :遗留的老版本的稳定版

一般下载Stable version版本

下载并且解压到某个文件夹

• 注意:解压到的文件夹中不能包含中文否则不能正常启动
• 双击启动接口
• 在浏览器中输入localhost,看到下面的页面说明安装成功了.
  
  把我们自己打包的dist文件夹拷贝到nginx文件中中
  
  也可以把dist文件夹拷贝放到html文件夹中，将原有的东西删除，html文件夹如下：
  
  然后在浏览器中做一个刷新，就可以看到我们的项目已经部署到nginx上面了。