首页 > 其他分享 >vue自动将px转换成rem

vue自动将px转换成rem

时间:2023-06-28 09:44:40浏览次数:36  
标签:vue lib px2rem px loader rem flexible

1.首先下载 lib-flexible

npm install lib-flexible --save

2.在main.js中引用 lib-flexible

import 'lib-flexible/flexible'

3.安装px2rem-loader(将px转换成rem)

npm install px2rem-loader

4.配置px2rem(在build/utils.js中配置px2rem)
我这边是根据 iphone6的设计图尺寸来的,所以用37.5能方便把设计图上的px直接写在代码里面

exports.cssLoaders = function(options){
  options = options || {}
  const px2remLoader = {
    loader: 'px2rem-loader',
    option: {
      remUnit: 37.5
    }
  }
}

最后重新 npm run dev 就可以使用了

标签:vue,lib,px2rem,px,loader,rem,flexible
From: https://www.cnblogs.com/alizhi/p/17509507.html

相关文章

  • vue组件-使用Vue.component全局注册组件
    通过components注册的时私有子组件例如:在组件A的components节点下,注册了组件F。则组件F只能用在组件A中;不能被用在组件C中。注册全局组件在vue项目的main.js入口文件中,通过Vue.component()方法,可以注册全局组件。importVuefrom'vue'importAppfrom'./App.vue'//导......
  • vue-组件-使用组件的三个步骤
    组件之间的父子关系使用组件的三个步骤......
  • vue组件-启用less语法以及唯一根节点
    <template><div><divclass="test-box"><h3>这是用户自定义的Test.vue---{{username}}</h3><button@click="changeName">修改用户名</button></div>&l......
  • vue透传 Attributes
    Attributes继承​在此之前,先来弥补一个小知识点,vue3支持多个根节点,vue2不支持,<!--vue2:错误的写法--><template><div></div><div></div></template><!--vue3:正确--><template><div></div><div></......
  • vue模板大小写区分
    HTML标签和属性名称是不分大小写的,所以浏览器会把任何大写的字符解释为小写。这意味着当你使用DOM内的模板时,无论是PascalCase形式的组件名称、camelCase形式的prop名称还是v-on的事件名称,都需要转换为相应等价的kebab-case(短横线连字符)形式://JavaScript中的ca......
  • vue3 defineExpose()
    使用scriptsetup的组件是默认关闭的——即通过模板引用或者$parent链获取到的组件的公开实例,不会暴露任何在scriptsetup中声明的绑定。可以通过defineExpose编译器宏来显式指定在scriptsetup组件中要暴露出去的属性:<scriptsetup>import{ref}from'vue'const......
  • vue3自定义hook
    什么是hookshook是钩子的意思,看到“钩子”是不是就想到了钩子函数?事实上,hooks还真是函数的一种写法。vue3借鉴reacthooks开发出了CompositionAPI,所以也就意味着CompositionAPI也能进行自定义封装hooks。vue3中的hooks就是函数的一种写法,就是将文件的一些单独功......
  • vue组件动态缓存与动态刷新
    动态缓存前言在项目中,为了减少性能消耗,有时我们需要使用keep-alive把组件缓存起来,但是并不是所有组件都需要被缓存,那么如何控制那些组件需要缓存呢?主要使用到路由meta,路由前置守卫,vux,动态组件。实现APP.vue<scriptsetup>import{ref,computed}from'vue'import{useRo......
  • vue3标准开发过程
    1.如何用脚手架快速新建一个vue3项目安装vue-cli后,用如下命令创建 vuecreatemy-vue3-project 默认创建vue3项目,直接回车即可。 新建完成后,如何引入element-plus? 用Webstrom打开项目,先运行一次npminstall然后运行npminstallelement-plus--save 然后打开m......
  • vue新建项目标准流程
    1、如何做到快速创建Vue2项目:要快速创建Vue2项目,可以按照以下步骤进行操作:步骤1:确保已经安装了Node.js和npm(Node.js的包管理器)。步骤2:打开终端或命令提示符,进入你想要创建项目的目录。步骤3:运行以下命令安装VueCLI(命令行工具):[email protected]步骤4:创建一个......