2021年9月
引入外部字体
摘要： //assets->font->myFont.css @font-face { font-family: 'oppoSansRe'; src: url(/chicidol/&); } 在assets下的font文件夹里放入SysSans-En-Regular.otf字体 阅读全文
posted @ 2021-09-08 18:17 chicidol 阅读(46) 评论(0) 推荐(0) 编辑
按需引入mint-ui
摘要： npm install mint-ui npm install babel-plugin-component //babel.config.js module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], "plugins": [[ 阅读全文
posted @ 2021-09-08 18:10 chicidol 阅读(82) 评论(0) 推荐(0) 编辑
在微信浏览器自动播放audio
摘要： 一般安卓手机可以自动播放，但是ios和部分oppo机型无法自动播放，需要手动触发，a56爆大奖在线娱乐需要分开处理 可以自动播放的机型，进入页面就自动播放，无法自动播放的机型，进入页面呈暂停状态 audio有play和canplay两个事件 可以自动播放时，会先触发play事件再触发canplay事件 无法自动播放 阅读全文
posted @ 2021-09-08 18:01 chicidol 阅读(667) 评论(0) 推荐(0) 编辑
2021年8月
vue-cli3.0使用rem适配移动端
摘要： 首先安装插件：npm install postcss-px2rem px2rem-loader --save 在src下新建utils文件夹，在utils下新建rem.js //utils->rem.js // rem等比适配配置文件 // 基准大小 const baseSize = 16 // 设 阅读全文
posted @ 2021-08-30 14:45 chicidol 阅读(254) 评论(0) 推荐(0) 编辑
解决vue页面之间滚动互相影响
摘要： 问题：比如在A页面滑动到底部，并点击按钮跳转到B页面，B页面如果也是长页面就会滚动到与A页面相同的位置 期望：进入B页面时，滚动位置为0 思路：在route->index.js页面，在路由配置页给B页面加上meta：{scrollToTop：true}，在scrollBehavior方法中判断met 阅读全文
posted @ 2021-08-04 17:31 chicidol 阅读(863) 评论(0) 推荐(0) 编辑
2021年7月
页面加载优化篇2------“vue页面运行时，把所有的js文件全部加载了,不光如此,有的js文件还加载了多次”的解决方案
摘要： 问题：vue页面运行时，把所有的js文件全部加载了,不光如此,有的js文件还加载了多次 期望：只加载当前页面需要的js文件，且不重复加载 //vue.config.js module.exports = { chainWebpack: config => { config.plugins.delet 阅读全文
posted @ 2021-07-30 11:58 chicidol 阅读(1322) 评论(1) 推荐(1) 编辑
配置开发环境.env.development 和生产环境.env.production
摘要： //.env.development NODE_ENV = 'development' VUE_APP_BASE_API1 = '/localApi1' VUE_APP_SRC1 = 'https://abcd.com/' //.env.production NODE_ENV = 'producti 阅读全文
posted @ 2021-07-27 16:41 chicidol 阅读(3604) 评论(0) 推荐(1) 编辑
页面加载优化篇1------vue gzip优化页面加载速度，速度快一倍
摘要： 在打包时可以借助 compression webpack plugin 实现gzip压缩，首先需要安装该插件：npm i-D compression-webpack-plugin //vue.config.js const CompressionPlugin = require("compressi 阅读全文
posted @ 2021-07-27 15:35 chicidol 阅读(101) 评论(0) 推荐(0) 编辑
判断后端返回的图片地址是否可用，不可用就显示默认的图片
摘要： <img :src="!state?defaultimg:url" alt="" /> data(){ return{ defaultimg: require("@/assets/images/headimg.png"), url:'https://aliyun.com/', state:false 阅读全文
posted @ 2021-07-27 15:05 chicidol 阅读(275) 评论(0) 推荐(0) 编辑
监听网络状态，弹出网络异常提示语
摘要： data(){ return{ onLine: navigator.onLine, } }, mounted(){ window.addEventListener('online',this.updateOnlineStatus); window.addEventListener('offline' 阅读全文
posted @ 2021-07-26 18:30 chicidol 阅读(162) 评论(0) 推荐(0) 编辑