在上一步创建好“webpack”模板项目后，需要修改一下项目配置

src/app.vue设置

首先是把src/app.vue中的logo去掉

然后根据需要去除浏览器的一些默认样式

src/main.js设置

由于要做移动端开发适配,因此在main,js中导入rem转px函数公式,本人在src下新建了config目录,并在config目录下新建了rem.js文件

导入rem.js

src/config/rem.js

rem.js里主要就是rem转px函数公式

(function () {
  function a() {
    var b = document.documentElement.clientWidth;
    b = b > 750 ? 750 : b; //750是设计稿大小,如果页面是1920请写1920
    var c = b / 750 * 100;
    document.getElementsByTagName("html")[0].style.fontSize = c + "px"
  }
  a();
  window.onresize = a
})();

这样rem文件就已经启用了,然后是路由配置

src/router配置(路由配置)

在src/router/index.js下配置路径,可根据需要配置,由于本次项目只有Home和Detail页面,因此只配置了两个

index.js

自建页面文件夹src/pages

咱们把页面文件统一放在pages,新建home.vue和detail.vue文件

根目录下的index.html配置

再加入以下代码,完成移动端配置

• 常见content参数
  initial-scale - 初始的缩放比例
  minimum-scale - 允许用户缩放到的最小比例
  maximum-scale - 允许用户缩放到的最大比例
  user-scalable - 用户是否可以手动缩放 0为禁止

安装插件 px2rem-loader

为了方便我们在开发时自动把px转化成rem,我们安装一个px2rem-loader插件,如果心算能力强的小伙伴可以不用装
cmd或git中输入cnpm install px2rem-loader即可安装

配置build/utils.js

build/utils.js中可以配置px2rem-loader的相关参数,本文在此配置为每rem为50px,如图配置:

build/utils.js

代码:

  var px2remLoader = {
    loader:'px2rem-loader',
    options:{
      remUnit: 50
    }
  }
// generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader,px2remLoader]

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

• 该插件可以使用注释/no/来取消局部的px转换成rem
  如:

width: 20px; /*no*/

自此,项目搭建配置完毕

---

Q1:如果我想这个px2rem作用到全局assets里面的CSS样式怎么配置呢？
需要安装另一个插件postcss-pxtorem。
1、在全局下安装插件：
npm install -D postcss-pxtorem
2、然后会生成一个js文件：

在文件中需要进行配置：

'postcss-pxtorem': {
            rootValue: 16, //设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
            propList: ['*']
        }

配置完之后，在css文件中可以写随便一个px单位的属性值来测试。
然后重启项目测试一下。

---

欢迎点赞收藏,希望本文能帮助到您,感谢您的支持