1. vue-cli3 和 vue-cli2 创建的 vue 项目目录的差异

用 vue-cli3 创建的 vue 项目目录如下:

用 vue-cli2 创建的 vue 项目目录如下:(该图片摘自:https://blog.csdn.net/weixin_36185028/article/details/78637528)

会发现用 vue-cli3 创建的 vue 项目目录没有 ‘build’ 和 ‘config’ 文件夹(注意这跟下面 vue 中引用 px2rem-loader 有很大联系)

2. vue 使用 lib-flexible

1)项目中安装 lib-flexible

npm install lib-flexible --save

2)在项目的入口 main.js 中引入 lib-flexible     

import 'lib-flexible/flexible.js'

3)检查一下 index.html 的 head 中,如果有 <meta name="viewport" ...> 标签,需要将他去掉,因为如果有这个标签的话,lib-flexible 就会默认使用这个标签。而我们要使用 lib-flexible 自己生成的 <meta name="viewport" ...> 来达到高清适配的效果。

通过以上三步,就完成了在 vue 项目使用 lib-flexible 来解决移动端适配了。

lib-flexible会自动在html的head中添加一个meta name="viewport"的标签,同时会自动设置html的font-size为屏幕宽度除以10,也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px,此时1rem应该等于75px。假如量的某个元素的宽度是150px,那么在css里面定义这个元素的宽度就是 width: 2rem

注意:

    1.检查一下html文件的head中,如果有 meta name="viewport" 标签,需要将他注释掉,因为如果有这个标签的话,lib-flexible就会默认使用这个标签。而我们要使用 lib-flexible 自己生成的 meta name="viewport" 来达到高清适配的效果。

    2.因为 html 的 font-size 是根据屏幕宽度除以 10 计算出来的,所以我们需要设置页面的最大宽度是10rem。

    3.如果每次从设计稿量出来的尺寸都手动去计算一下rem,就会导致我们效率比较慢,还有可能会计算错误,所以我们可以使用px2rem-loader自动将css中的px转成rem

(该段摘录于:https://blog.csdn.net/yanzhi_2016/article/details/80461951

3. vue 使用 px2rem-loader 自动将css中的px转换成rem

1)在项目中安装 px2rem-loader

npm install px2rem-loader --save-dev

2)配置px2rem-loader

     注意:因为 用 vue-cli3 创建的 vue 项目目录没有 ‘build’ 和 ‘config’ 文件,所以两者生成的项目配置px2rem-loader对应的文件不同!!!

 a. 用 vue-cli3 以下版本 创建的 vue 项目配置 px2rem-loader 如下:

   a.1 打开build/utils.js文件,找到 cssLoader 方法下添加如下代码

const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap,
      importLoader: 5 // 在加载cssLoader之前加载的loader个数
    }
}

//添加如下代码
const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      emUnit: 75 // 设计稿的1/10
    }
}

    a.2 修改 generateLoaders 方法

function generateLoaders(loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
    })
}

 b. 用 vue-cli3 创建的 vue 项目配置 px2rem-loader 如下:

    找到文件 node_modules/@vue/cli-service/lib/config/css.js,添加规则:   

rule
    .use('px2rem-loader')
    .loader('px2rem-loader')
    .options({emUnit: 75})

    然后重新运行项目,打开控制台可以看到代码中的px已经被转成了rem 

注意:使用 px2rem-loader 后再使用px上有些不同:
    直接写 px ,编译后会直接转化成rem —— 除开下面两种情况,其他长度用这个
    在 px 后面添加 /*no*/ ,不会转化 px,会原样输出。 —— 一般border需用这个
    在 px 后面添加 /*px*/ ,会根据 dpr 的不同,生成三套代码。—— 一般字体需用这个

 

Logo

前往低代码交流专区

更多推荐