如果是做 PC 端的网页,无需做 rem 适配,但是做 H5 开发,rem 是需要做一下的 方案一: Vant 官方也为我们提供了方案,如下图所示: 咱们就按照官方为我们提供的方案进行适配,安装它们: yarn add lib-flexible -S yarn add postcss-pxtorem ...
转载 2021-10-12 16:01:00
729阅读
1点赞
在做移动端开发,我们希望px自动转成rem,有三种方法1JS计算 就是自己手动去算,在app.vue中,通过JavaScript读取屏幕宽度,然后根据宽度计算出对应的尺寸并设置根元素的font-size。const oHtml = document.getElementsByTagName('html')[0] const width = oHtml.clientWidth; // 320px的屏
#box { height: 44px //用postcss-px2rem插件配置后相当于0.44rem width: 100% font-size: 24px;/*no*/ //如果不想用插件转换可以用/*no*/标识符} ...
转载 2021-08-30 11:43:00
800阅读
2评论
下载lib-flexible https://github.com/amfe/lib-flexible 在main.js中引入lib-flexible 安装px2rem-loader https://github.com/songsiqi/px2rem 配置px2rem-loader 在build文
原创 2022-04-06 10:29:18
358阅读
我们都知道echarts图标数据是写在option = {}对象里,但是数据不可能是固定值,而是通过后端接口返回来的,本以为只需要在 data里设置一个变量去接收返回的数据,然后再将变量赋值给echarts就可以了,结果踩坑了!发现这样并不能生效。 经过一段时间分析,原因就是 vue axios属于异步加载数据,数据改变了,但是没有告诉echarts,导致echarts并不知道数据变化了,所以得在
一个认真生活的人,都值得被认
转载 2022-04-21 13:49:39
365阅读
问:PAC是什么? 答:是Proxy Auto Config的缩写,实际上是一个JavaScript脚本。问:PAC脚本里面有什么? 答:这个脚本包含了一个FindProxyForURL(url, host)函数。问:FindProxyForURL函数有什么功能? 答:根据传入的url,可能会返回DIRECT或PROXY proxy.example.com:8080或类似的其他字符串,调用者可以根
前端开发中还原设计图的重要性毋庸置疑,目前来说应用最多的应该也还是使用rem。然而很多人依然还是处于刀耕火种的时代,要么自己去计算rem值,要么依靠编辑器安装插件转换。而本文的目标就是通过一系列的配置后,在开发中可以直接使用设计图的尺寸开发,项目为我们自动编译,转换成rem。技术栈vue-cli:使用脚手架工具创建项目。postcss-pxtorem:转换pxrem的插件。自动设置根节点html
一、父传子//父组件 <template> <div id="app"> <Subassembly :Properties="Properties"/>//绑定一个属性挂载要传输的变量 </div> </template> <script> import Subassembly from '组件路径'; expor
vue有自己的脚手架构建工具vue-cli,使用起来非常方便,使用webpack来集成各种开发便捷工具,比如:代码热更新,修改代码之后网页无刷新改变,对前端开发来说非常的方便PostCss,再也不用去管兼容性的问题了,只针对chrome写css代码,会自动编译生成支持多款浏览器的css代码Eslint,统一代码风格,规避低级错误,对于有代码洁癖的人来说是绝对的好东西,不过有些地方的代码校验有时候也
本文总结日常开发中26个CSS实现方法,如有遗漏或补充,还请指正!解决inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移.wrap { display: inline-block; overflow: hidden vertical-align: bottom } 超出部分显示省略号// 单行文本 .wrap { overf
在我们现在的无纸化办公环境下,大家可以方便的制作出各种电子表格excel,使用公式和函数对数据进行复杂的运算。例如:财务报表、订货单、验收单、成绩单等,现在都是走向无纸化办公,采用excel表格文件进行统计。因此一些对于我们重要的excel文件中的数据属于重要资源,都不是以excel表格文件形式存在的,大多编辑会进行用PDF封存防止他人使用,对自己文化创造成损失,同时很多的公司内部网站也会将上传的
转载 2024-10-16 07:32:05
26阅读
vue最主要的特点就是响应式机制、模板、以及对象式的组件声明语法,而3.0对这三部分都做了更改。 1. 响应式(数据的双向绑定) 2.0的响应式   基于Object.defineProperty中的set和get方法实现   兼容主流浏览器和ie9以上的ie浏览器,   能够监听数据对象的变化,   但是监听不到对象属性的增删、数组元素和长度的变化,   同时会在vue初始化的
安装flexiblenpm install lib-flexible --save引入flexible在项目入口文件main.js中添加如下代码,引入flexibleimport 'lib-flexible'pxrem使用 webpack 的 px2rem-loader,自动将px转换为rem安装px2rem-loadernpm install px2rem-loader --save-de
转载 2024-07-11 19:42:08
819阅读
文章目录Vue项目打包成exe可执行文件需要工具执行步骤跨域失效解决方案 Vue项目打包成exe可执行文件一篇好文章 如何用electron技术将Vue项目打包成exe可执行文件需要工具1. node版本>12 2. vue版本>2.x 3. 魔法上网工具不满足条件的先去升一下,再继续下边的操作执行步骤进入Vue项目的根目录,打开命令行,注意项目所在路径不能有中文,否则会报错的哦 v
升级版本通常情况下,版本升级到最新不仅可以提高编译速度也可以避免一些出现过的问题( 惨遭打脸选用的 Ant Design of Vue 就重大更新了一次,又重新写的 )。按需加载比如常见的 lodash 库,我们显然不需要全部都用到,所以要采用按需加载的方式来引用,对一些常见的方法进行提取统一进行处理,一般来说如果支持的话,文档都会标注,如果没有又不想要体积太大就自己写一个,这方面不在过
小知识Vue.prototype和Vue.use的区别这个是全局可以通过Vue对象获取serring的值 Vue.prototype.$settings = settings; 这个是配置全局环境,不需要取用,就已经存在了 Vue.use(ElementUI);配置全局样式1.在assets里创建样式注意样式不能直接控制router-link标签,但是可以控制a标签,因为router-link最
    最近为移动端使用rem雪碧图小图标自适应困扰,想了半天终于找到解决方案!难点在于雪碧图要跟随屏幕缩小,下面我们进入正题!    大家先要明白rem是什么,我给大家个新的理解,rem的本质就是百分比转换,不明白的童鞋可以具体去恶补下rem相关知识!既然rem的本质是百分比转换,那么我们也可以通过同样的方法转换雪碧图,下面上案例!  &nbsp
转载 11月前
72阅读
VSCode下载下载地址下载arm-eabi-gcc10.3.1,mingw64-gcc12.2.0,nRF5x-Command-Line-Tools_9_6_0_Installer等安装文件链接:https://pan.baidu.com/s/1iuVIkd3GAiUb3qGgF-ecPg 提取码:2d69安装arm-eabi-gcc10.3.1设置环境变量C:\SysGCC\arm-eabi\
由于element-ui 未对 Vue3 兼容,导致官方提供的构建版本不能使用 下面手动进行迁移决定升级前请确保项目所有依赖都有替代方法 Vue特性变更,官网会给出解决方法 特别注意第三方UI相关依赖vue2 改为 vue3 以及 相应的依赖修改vue@next , 组件 @vue/compiler-sfc (Vue2:vue-template-compiler)element-ui 换成 ele
转载 2024-10-18 15:57:18
94阅读
  • 1
  • 2
  • 3
  • 4
  • 5