vue+vant 实现 rem的转换

桃扇骨 2022-12-29 09:53 122阅读 0赞

# vue+vant 实现rem的转换 #

## 1. 搭建环境 ##

### 1.1.输入 `vue ui` ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70]

### 1.2. create project 创建项目 ###

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JKNdk0mU-1608575680484)(./img/image-20201222011751211.png)\]][img-JKNdk0mU-1608575680484_._img_image-20201222011751211.png]

### 1.3. 选择手动安装 ###

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MbuWBvyk-1608575680486)(./img/image-20201222011820216.png)\]][img-MbuWBvyk-1608575680486_._img_image-20201222011820216.png]

### 1.4. 选择配置文件 ###

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Edt6IC0J-1608575680487)(./img/image-20201222011911014.png)\]][img-Edt6IC0J-1608575680487_._img_image-20201222011911014.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 1]

### 1.5. 选择版本和postcss配置 ###

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9JdZb3cK-1608575680489)(./img/image-20201222011956081.png)\]][img-9JdZb3cK-1608575680489_._img_image-20201222011956081.png]

### 1.6. 选择预设—我们这边不选择预设 ###

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZsU1Lpow-1608575680490)(./img/image-20201222012030384.png)\]][img-ZsU1Lpow-1608575680490_._img_image-20201222012030384.png]

### 1.7. 等待创建 ###

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mGTzhOBC-1608575680491)(./img/image-20201222012111107.png)\]

### 1.8. 创建成功！！ ###

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z34cvnII-1608575680491)(./img/image-20201222012135084.png)\]][img-z34cvnII-1608575680491_._img_image-20201222012135084.png]

## 2. 启动项目 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 2]

### 2.1. 找到对应的项目文件—> 找到tasks任务----> 找到serve 服务----> 找到Run task 启动项目 ###

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mzYyfQYF-1608575680492)(./img/image-20201222012331782.png)\]][img-mzYyfQYF-1608575680492_._img_image-20201222012331782.png]

### 2.2. 点击启动 ###

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-11EkYIg1-1608575680493)(./img/image-20201222012413595.png)\]][img-11EkYIg1-1608575680493_._img_image-20201222012413595.png]

### 2.3. 启动成功 ###

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S0RM4GdS-1608575680494)(./img/image-20201222012431021.png)\]][img-S0RM4GdS-1608575680494_._img_image-20201222012431021.png]

## 3. 安装vant ##

### 3.1. 找到Dependencies–>install ###

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JxxpGxrD-1608575680495)(./img/image-20201222012607962.png)\]][img-JxxpGxrD-1608575680495_._img_image-20201222012607962.png]

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BZRFZgI6-1608575680496)(./img/image-20201222012702807.png)\]][img-BZRFZgI6-1608575680496_._img_image-20201222012702807.png]

### 3.2. 安装成功 ###

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TT1sBoqj-1608575680497)(./img/image-20201222012754919.png)\]][img-TT1sBoqj-1608575680497_._img_image-20201222012754919.png]

## 4. vue项目中使用vant ##

### 4.1.配置babel,新建根目录下新建：`.babelrc`(如果项目中，就不需要新建了) ###

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wZN5rzOD-1608575680498)(./img/image-20201222014048543.png)\]][img-wZN5rzOD-1608575680498_._img_image-20201222014048543.png]

*  写入配置：
    
        { 
          "plugins": [
            ["import", { 
              "libraryName": "vant",
              "libraryDirectory": "es",
              "style": true
            }]
          ]
        }

### 4.2. 安装依赖 ###

# 1.安装babel-plugin-import实现按需加载
    yarn add babel-plugin-import

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZVrX33HP-1608575680499)(./img/image-20201222013513457.png)\]][img-ZVrX33HP-1608575680499_._img_image-20201222013513457.png]

### 4.3. 测试是否可以使用vant ###

*  1.  在about.vue页面写入：
        
        ![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KiqZ9iGn-1608575680500)(./img/image-20201222014403160.png)\]][img-KiqZ9iGn-1608575680500_._img_image-20201222014403160.png]
        
            <van-button type="default">默认按钮1</van-button>
            <van-button type="primary" @click="clickEvent">主要按钮</van-button>
            <van-button type="info">信息按钮</van-button>
            <van-button type="warning">警告按钮</van-button>
            <van-button type="danger">危险按钮</van-button>
    2.  在main.js写入：
        
            import { Button} from 'vant';
            Vue.use(Button);
        
        ![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qUhDX1rN-1608575680501)(./img/image-20201222014335071.png)\]][img-qUhDX1rN-1608575680501_._img_image-20201222014335071.png]
    3.  刷新页面：
        
        ![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-47XvhqYe-1608575680501)(./img/image-20201222014439268.png)\]][img-47XvhqYe-1608575680501_._img_image-20201222014439268.png]
    4.  说明成功了

## 5. 引入rem转换–安装postcss-pxtorem 这个是将px转为rem----注意直接可以在项目设置px，这个插件自动会编译的rem自动识别，你在项目中使用px就可以了，不用在vscode再次使用rem,这样子写起来更快了 ##

### 5.1. 命令安装：postcss-pxtorem ###

yarn add postcss-pxtorem

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Sc9bXbXg-1608575680502)(./img/image-20201222014615304.png)\]][img-Sc9bXbXg-1608575680502_._img_image-20201222014615304.png]

### 5.2. 命令安装：amfe-flexible ###

yarn add amfe-flexible

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mVrLLBLA-1608575680503)(./img/image-20201222022000235.png)\]][img-mVrLLBLA-1608575680503_._img_image-20201222022000235.png]

### 5.3. 在main.js文件中引入amfe-flexible/index.js ###

import 'amfe-flexible/index.js'

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dtQuXoY1-1608575680503)(./img/image-20201222022110175.png)\]][img-dtQuXoY1-1608575680503_._img_image-20201222022110175.png]

### 5.4. 在public/index.html加入meta标签 ###

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nacYy3qK-1608575680504)(./img/image-20201222022210465.png)\]][img-nacYy3qK-1608575680504_._img_image-20201222022210465.png]

### 5.5. 在package.json项目配置里设置postcss ###

"postcss": {
    		    "plugins": {
    		      "autoprefixer": {
    		        "overrideBrowserslist": [
    		          "Android 4.1",
    		          "iOS 7.1",
    		          "Chrome > 31",
    		          "ff > 31",
    		          "ie >= 8"
    		        ]
    		      },
    		      "postcss-pxtorem": {
    		        "rootValue": 37.5,
    		        "propList": [
    		          "*"
    		        ]
    		      }
    		    }
    		  }

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pWduYqSJ-1608575680505)(./img/image-20201222022310468.png)\]][img-pWduYqSJ-1608575680505_._img_image-20201222022310468.png]

### 5.6. 在浏览器测试 ###

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VS6dtYTm-1608575680505)(./img/image-20201222022419328.png)\]][img-VS6dtYTm-1608575680505_._img_image-20201222022419328.png]

*  这是在plus下的

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R8sGY6y4-1608575680506)(./img/image-20201222022452539.png)\]][img-R8sGY6y4-1608575680506_._img_image-20201222022452539.png]

*  在iPhone6测试一下，看看是否改变了

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r2tG00F8-1608575680506)(./img/image-20201222022551418.png)\]][img-r2tG00F8-1608575680506_._img_image-20201222022551418.png]

# 变小了，说明我们自适应成功了！！！ #

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20221120/c80c050100304509a9400dac80bc65b4.png
[img-JKNdk0mU-1608575680484_._img_image-20201222011751211.png]: /images/20221120/7ca57e14516e4126ba4f53ba81c02977.png
[img-MbuWBvyk-1608575680486_._img_image-20201222011820216.png]: https://img-blog.csdnimg.cn/20201222032534857.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA=,size_16,color_FFFFFF,t_70
[img-Edt6IC0J-1608575680487_._img_image-20201222011911014.png]: https://img-blog.csdnimg.cn/20201222032550382.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201222032607351.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA=,size_16,color_FFFFFF,t_70
[img-9JdZb3cK-1608575680489_._img_image-20201222011956081.png]: https://img-blog.csdnimg.cn/20201222032631369.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA=,size_16,color_FFFFFF,t_70
[img-ZsU1Lpow-1608575680490_._img_image-20201222012030384.png]: https://img-blog.csdnimg.cn/20201222032643678.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA=,size_16,color_FFFFFF,t_70
[img-z34cvnII-1608575680491_._img_image-20201222012135084.png]: https://img-blog.csdnimg.cn/20201222032657349.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201222032713220.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA=,size_16,color_FFFFFF,t_70
[img-mzYyfQYF-1608575680492_._img_image-20201222012331782.png]: https://img-blog.csdnimg.cn/20201222032730464.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA=,size_16,color_FFFFFF,t_70
[img-11EkYIg1-1608575680493_._img_image-20201222012413595.png]: https://img-blog.csdnimg.cn/20201222032742650.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA=,size_16,color_FFFFFF,t_70
[img-S0RM4GdS-1608575680494_._img_image-20201222012431021.png]: https://img-blog.csdnimg.cn/20201222032757881.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA=,size_16,color_FFFFFF,t_70
[img-JxxpGxrD-1608575680495_._img_image-20201222012607962.png]: https://img-blog.csdnimg.cn/20201222032811897.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA=,size_16,color_FFFFFF,t_70
[img-BZRFZgI6-1608575680496_._img_image-20201222012702807.png]: https://img-blog.csdnimg.cn/2020122203283891.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA=,size_16,color_FFFFFF,t_70
[img-TT1sBoqj-1608575680497_._img_image-20201222012754919.png]: https://img-blog.csdnimg.cn/20201222032855885.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA=,size_16,color_FFFFFF,t_70
[img-wZN5rzOD-1608575680498_._img_image-20201222014048543.png]: https://img-blog.csdnimg.cn/20201222032913370.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA=,size_16,color_FFFFFF,t_70
[img-ZVrX33HP-1608575680499_._img_image-20201222013513457.png]: https://img-blog.csdnimg.cn/20201222032929547.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA=,size_16,color_FFFFFF,t_70
[img-KiqZ9iGn-1608575680500_._img_image-20201222014403160.png]: https://img-blog.csdnimg.cn/20201222032948256.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA=,size_16,color_FFFFFF,t_70
[img-qUhDX1rN-1608575680501_._img_image-20201222014335071.png]: https://img-blog.csdnimg.cn/2020122203300385.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA=,size_16,color_FFFFFF,t_70
[img-47XvhqYe-1608575680501_._img_image-20201222014439268.png]: https://img-blog.csdnimg.cn/2020122203301662.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA=,size_16,color_FFFFFF,t_70
[img-Sc9bXbXg-1608575680502_._img_image-20201222014615304.png]: https://img-blog.csdnimg.cn/20201222033030941.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA=,size_16,color_FFFFFF,t_70
[img-mVrLLBLA-1608575680503_._img_image-20201222022000235.png]: https://img-blog.csdnimg.cn/20201222033059392.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA=,size_16,color_FFFFFF,t_70
[img-dtQuXoY1-1608575680503_._img_image-20201222022110175.png]: https://img-blog.csdnimg.cn/20201222033114185.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA=,size_16,color_FFFFFF,t_70
[img-nacYy3qK-1608575680504_._img_image-20201222022210465.png]: https://img-blog.csdnimg.cn/20201222033128702.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA=,size_16,color_FFFFFF,t_70
[img-pWduYqSJ-1608575680505_._img_image-20201222022310468.png]: https://img-blog.csdnimg.cn/20201222033143669.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA=,size_16,color_FFFFFF,t_70
[img-VS6dtYTm-1608575680505_._img_image-20201222022419328.png]: https://img-blog.csdnimg.cn/20201222033157862.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA=,size_16,color_FFFFFF,t_70
[img-R8sGY6y4-1608575680506_._img_image-20201222022452539.png]: https://img-blog.csdnimg.cn/20201222033211185.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA=,size_16,color_FFFFFF,t_70
[img-r2tG00F8-1608575680506_._img_image-20201222022551418.png]: https://img-blog.csdnimg.cn/20201222033224309.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA=,size_16,color_FFFFFF,t_70