基于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属性了。
vue.config.js配置
给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官网描述如下。
    vue-router官网描述
  • 详细的使用方法参见参考文章。仅需要安装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浏览器开了万能复制插件。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值