基于vue2和element-ui的项目框架模板加强版

前言，我的上篇博客讲了如何基于vue2和element-ui搭建一个基础的项目框架模板，有兴趣的可以看下，文章有点长，这篇博客就谈谈可以在基础框架模板上增添哪些功能。

ie兼容

ie兼容之前是让我很头痛的一件事，但经过我的反复摸索，百度，哈哈，主要是百度，总结了现在的三步搞定策略。
由于ie不支持js的es6语法，所以ie兼容主要的目的就是将现在的ES6语法的代码转为ES5的代码。
友情提示：仅vue2项目有效，vue3现在完全不兼容ie。

参考：Vue2/3 对浏览器的兼容性

第一步 main.js

在main.js里加入下面两行代码，一定要加在第一行。

import "core-js/stable";
import "regenerator-runtime/runtime";

第二步 babel.config.js

如果没有这个文件，就在项目目录下创建。

主要是这行代码["@vue/app", { useBuiltIns: "entry", corejs: 3 }],

module.exports = {
  /**
   * compact: false解除babel处理文件的大小被限制在了500kb的限制，
   *  用来解决npm run dev或者npm run build 出现...exceeds the max of 500KB
   */
  compact: false,
  presets: [
    ["@vue/app", {
      useBuiltIns: "entry",
      corejs: 3
    }],
    ["@babel/preset-env", {
      modules: false,
    }],
  ],
  plugins: [
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk",
      },
    ],
  ],
};

第三步 .browserslistrc

如果没有这个文件，就在项目目录下创建。

> 0.25%
last 4 versions
not ie <= 8

第四步 vue.config.js

其实上面三步针对vue2初始化项目已经可以兼容ie浏览器了，但项目总会引入各种依赖，依赖包里如果使用了es6语法代码就有可能导致无法兼容ie浏览器。这个时候就需要在vue.config.js使用transpileDependencies属性了。

给transpileDependencies传一个数组，列出需要转译的第三方包包名或正则表达式即可。
我这里是传了vue-lazyload（vue项目图片懒加载插件，后面会讲如何粗略使用）和axios（前后端交互）。
是不是万万没想到居然还有axios吧，我刚开始也没想到，我是把package.json里的依赖一个一个加上的试，然后才查到居然是它。
所以我的个人建议是如果你的项目需要兼容ie浏览器，建议每安装一个依赖，就尝试下是否可以在ie浏览器下运行，如果不行，就把依赖包名放入这个数组就OK，如果你觉得每次都加实在麻烦，可以直接使用transpileDependencies: [ "*"]

参考：
Vue CLI官网浏览器兼容性
VUE项目IE11兼容问题及处理方案
整理各种Vue项目在IE浏览器白屏报错 SCRIPT1002:语法错误

vue路由跳转query传参加密

• vue项目路由跳转会使用vue-router插件，这样页面跳转传参有两种方式，一种是params，一种是query。
• params传参不会在链接上显示，但刷新后就会消失，很不方便，所以我们传参一般会使用query方式。
  但问题就来了，使用query方式虽然刷新参数不会消失，但参数会在链接上明文展示，用户就会觉得这不安全，所以我们可以在前端给参数加加密，给予用户以安全感。
• 方法就是使用vue-router的Router 构建选项的stringfyQuery和parseQuery的选项。Vue Router3.x官网描述如下。
  
• 详细的使用方法参见参考文章。仅需要安装crypto-js插件。安装命令如下

  npm install crypto-js
  

参考：vue-router路由中对query中的参数进行加密

移动端适配方案

• 使用amfe-flexible、postcss-pxtorem/postcss-px-to-viewport来适配移动端。
• amfe-flexible 用于设置 rem 基准值
  postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
  postcss-px-to-viewport 也是一款 postcss 插件，用于将单位转化为 vw/vh

安装命令如下：

npm i amfe-flexible postcss-pxtorem
npm i amfe-flexible postcss-px-to-viewport

使用（两步走）

第一步： main.js引入amfe-flexible
import 'amfe-flexible'
第二步： 项目目录下新建一个postcss.config.js，与vue.config.js平级
添加如下代码，使用postcss-pxtorem，就删除postcss-px-to-viewport，使用postcss-px-to-viewport同理。

module.exports = ({ file }) => {
 	return {
	  plugins: {
	    // 兼容浏览器，添加前缀
	    autoprefixer: {
	      overrideBrowserslist: [
	        "Android 4.1",
	        "iOS 7.1",
	        "Chrome > 31",
	        "ff > 31",
	        "ie >= 8",
	        "last 4 versions", // 所有主流浏览器最近4个版本
	      ],
	    },
	    // 移动端解决方案 amfe-flexible postcss-pxtorem的使用 参考https://blog.csdn.net/weixin_43242112/article/details/112193205
	    // 在vue单文件中，包含在style内的px单位会自动转换成rem，但是行内样式中的px单位不会转换成rem
	    // 'postcss-pxtorem': {
	    //   /* 1、在上面就提到过，amfe-flexible最终转换html元素的font-size是手机屏幕的十分之一，所以这个rootValue的值是根据我们的设计稿来设置的。
	    //   2、由于我的设计稿是通过iphone6做为原型设计的，宽度是375，所以在这里我rootValue的值为37.5。
	    //   3、如果你的设计稿宽度是750，那么rootValue的值为75。
	    //   4、如果你使用的UI库是Vant，那么这个rootValue的值就必须设置为37.5，因为 Vant 是基于逻辑像素 375 写的，所以如果你设置为 75 的话，Vant 的样式就小了一半。
	    //   5、如果设计稿就是750，我们在测量设计稿的时候都必须除2才能使用，否则就会变得很大。不想除就找UI把设计图变成0.5倍图，也就是宽为375。 */
	    //   rootValue: file.includes('vant') ? 37.5 : 75, //结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
	    //   /**
	    //    * 是一个存储哪些将被转换的属性列表，这里设置为['*']全部，假设需要仅对边框进行设置，可以写['*', '!border*']:
	    //      * 属性必须完成匹配。比如height，width
	    //      * 使用通配符 * 启用所有属性。[‘*’]
	    //      * 在单词的开头或结尾使用 *来匹配。比如[“*positons*”,“*height”]会匹配到background-position-y和min-height、max-height
	    //      * 使用！不匹配属性。比如 [“!height”] 就不会转换height
	    //      * 可以将！和* 结合使用。比如 [“!font*”] font-size将不会转换
	    //    */
	    //   propList: ["*"],
	    //   unitPrecision: 5, //保留rem小数点多少位
	    //   // selectorBlackList: ['.el'],  //则是一个对css选择器进行过滤的数组，比如你设置为['fs']，那例如fs-xl类名，里面有关px的样式将不被转换，这里也支持正则写法。
	    //   replace: true, //类型为布尔值 替换包含 rems 的规则，而不是添加回退。
	    //   mediaQuery: false, //允许在媒体查询中转换`px`,false即媒体查询( @media screen 之类的)中不生效
	    //   // minPixelValue : 12,//类型为数字 设置要替换的最小像素值,px小于12的不会被转换
	    //   // exclude：/ node_modules / i  //类型为字符串或正则表达式或函数 要忽略并保留为 px 的文件路径。
	    // },
	
	    'postcss-px-to-viewport': {
	      unitToConvert: 'px', // 要转化的单位
	      viewportWidth: file.includes('vant') ? 375 : 750, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
	      // viewportHeight: 812, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
	      unitPrecision: 6, // 指定`px`转换为视窗单位值的小数位数
	      viewportUnit: 'vw', //指定需要转换成的视窗单位， vw,vh,vmin建议使用vw
	      selectorBlackList: [], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
	      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
	      mediaQuery: false // 允许在媒体查询中转换`px`
	    }
	  },
  }
};

内联样式不自动转换解决办法

在main.js里添加如下代码

function pxToVW(px){
    if(/%/ig.test(px)){ // 有百分号%，特殊处理，表述px是一个有百分号的数，比如：90%
        return px
    }else{
        return (parseFloat(px) / 7.5) + 'vw' // 这里的7.5，和viewportWidth值对应,100vw是满屏宽度，所以这里还得除以100
    }
}

Vue.prototype.$pxToVW=pxToVW

//function pxToRem(px){
//   if(/%/ig.test(px)){ // 有百分号%，特殊处理，表述px是一个有百分号的数，比如：90%
//       return px
//   }else{
//       return (parseFloat(px) / 75) + 'rem' // 这里的75，和rootValue值对应
//   }
//}

//Vue.prototype.$pxToRem=pxToRem

页面中

<div :style="{ 'font-size':$pxToVW('20px')}">内联样式px转vw</div>
<!-- <div :style="{ 'font-size':$pxToRem('20px')}">内联样式px转rem</div> -->

参考：移动端适配方案及不同单位区别、移动端适配 postcss-pxtorem、postcss-px-to-viewport

图片懒加载

为什么要图片懒加载？
页面加载速度更快，用户体验感更好。

安装

npm install vue-lazyload

插件地址、demo

使用

• mian.js引入

  //引入vue懒加载
  import VueLazyload from "vue-lazyload";
  
  //没有页面加载中的图片和页面图片加载错误的图片显示
  // Vue.use(VueLazyload);
  
  //方法二：  显示页面图片加载中的图片和页面图片加载错误的图片
  //引入图片
  import errorPng from './assets/images/404.png'
  // import loading from '@/assets/images/load.jpg'
  //注册图片懒加载
  Vue.use(VueLazyload, {
      // preLoad: 1.3, //提前加载高度（数字 1 表示 1 屏的高度）
      error: errorPng,//图片错误的替换图片路径(可以使用变量存储)
      // loading: loading,//正在加载的图片路径(可以使用变量存储)
      attempt: 1 //加载错误后最大尝试次数
  })
  

• vue页面使用
  将之前的v-bind:src改成v-lazy即可。

	<!--imageUrl正确图片地址，想看到自己404图片效果，不要直接将imageUrl弄成错误的，直接改成错误的，项目直接就会引入错误，导致项目起不起来-->
	<div v-for="item in 1" :key="item" style="margin: 10px 0;">
      错误图片地址显示的图片:
      <img v-lazy="imageUrl+0" alt="错误" width="60">
    </div>
    <img v-lazy="imageUrl" alt="错误" width="60">

参考：
前端图片懒加载的原理和三种实现方式
组件懒加载和路由懒加载

其他

持久化保存数据的插件

vue.ls（用于处理本地存储、会话存储和来自 Vue 上下文的内存存储）

参考：vue-ls的使用、js-cookie和vue-cookies（Cookie使用教程）

vue中怎么引入字体包
vue自定义网页标签图标不生效的原因和解决办法
vue-puzzle-vcode与vue-drag-verify纯前端的拼图人机验证、右滑拼图验证

一些莫名奇妙bug

回车事件突然不生效，加.native。
@keyup.enter.native 如果还不生效，可能是浏览器开了某个插件导致，我的话就是使用Edge浏览器开了万能复制插件。