vue cli3 pc端适配(亲测有效)

对行内样式无效喔~ 而且会影响ui框架

npm下载依赖包

npm i postcss-px2rem -S
npm install postcss-pxtorem -S
npm i px2rem-loader -S

在工具栏文件夹下新建rem.js,并在main.js文件里面引入

// rem等比适配配置文件
// 基准大小
const baseSize = 192
// 设置 rem 函数
function setRem() {
  // 当前页面宽度相对于 1920宽的缩放比例,可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 1920
  // 设置页面根节点字体大小(“Math.min(scale, 2)” 指最高放大比例为2,可根据实际业务需求调整)
  // document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
  document.documentElement.style.fontSize = baseSize * scale + 'px'
  console.log(document.documentElement.style.fontSize)
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function() {
  setRem()
}

在vue.config.js中,配置以下内容:

const px2rem = require('postcss-px2rem')

// 配置基本大小
const postcss = px2rem({
  // 基准大小 baseSize,需要和rem.js中相同
  remUnit: 192
})

module.exports = {
    lintOnSave: true,
    css: {
        loaderOptions: {
            postcss: {
                plugins: [postcss]
            }
        },
    },

};

npm装包时-S和-D的区别

npm install name -save 简写(npm install name -S) 自动把模块和版本号添加到dependencies。
npm install name -save-dve 简写(npm install name -D) 自动把模块和版本号添加到devdependencies。

 

-D后,安装包会在package中的  devDependencies对象中。简称dev。dev是在开发环境中要用到的。

举例:

构建工具:gulp和webpack是用来压缩代码,打包等需要的工具,程序实际运行的时候并不需要,就要放在dev中所以要用  -D

 

-S后,安装包会在package中的  dependencies  对象中。简称dep。dep是在生产环境中要用到的。

举例:

项目插件:例如element ui、echarts这种插件要在运行中使用的,就要放在dep中所以就用  -S

 

 

一般我们项目插件,在api中都可以看到,一般都是-S。因为这些插件是在程序运行中使用的。
©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页