前言,我的上篇博客讲了如何基于vue2和element-ui搭建一个基础的项目框架模板,有兴趣的可以看下,文章有点长,这篇博客就谈谈可以在基础框架模板上增添哪些功能。
ie兼容
ie兼容之前是让我很头痛的一件事,但经过我的反复摸索,百度,哈哈,主要是百度,总结了现在的三步搞定策略。
由于ie不支持js的es6语法,所以ie兼容主要的目的就是将现在的ES6语法的代码转为ES5的代码。
友情提示:仅vue2项目有效,vue3现在完全不兼容ie。
第一步 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
移动端适配方案
- 使用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
使用
- 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中怎么引入字体包
vue自定义网页标签图标不生效的原因和解决办法
vue-puzzle-vcode与vue-drag-verify纯前端的拼图人机验证、右滑拼图验证
一些莫名奇妙bug
回车事件突然不生效,加.native。
@keyup.enter.native 如果还不生效,可能是浏览器开了某个插件导致,我的话就是使用Edge浏览器开了万能复制插件。