vue+vant+rem 适配方法

青旅半醒 2023-01-11 09:11 293阅读 0赞

**一、新建一个vue项目**

vue create 项目名称

**二、安装vant**

# Vue 2 项目，安装 Vant 2：
    npm i vant -S
    
    # Vue 3 项目，安装 Vant 3：
    npm i vant@next -S

**三、引入vant组件**

main.js中引入
    以button组件为例，按需引入，也可以引入所有组件 官方文档：https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart#fang-shi-er.-shou-dong-an-xu-yin-ru-zu-jian
    import Button from 'vant/lib/button';
    Vue.use(Button);

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

安装postcss-pxtorem
    
    npm install postcss-pxtorem
    
    安装amfe-flexible
    
    npm install amfe-flexible

**五、在main.js文件中引入amfe-flexible/index.js**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ0NTM2Mw_size_16_color_FFFFFF_t_70]

**六、 在public/index.html加入meta标签**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ0NTM2Mw_size_16_color_FFFFFF_t_70 1]  
**七、在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": [
    		          "*"
    		        ]
    		      }
    		    }
    		  }

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

**八、在浏览器测试**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ0NTM2Mw_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ0NTM2Mw_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ0NTM2Mw_size_16_color_FFFFFF_t_70 5]  
在不同的屏幕下大小不一样就代表设置成功了

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ0NTM2Mw_size_16_color_FFFFFF_t_70]: /images/20221119/b83136dfcc0f476a82fbf23841f671f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ0NTM2Mw_size_16_color_FFFFFF_t_70 1]: /images/20221119/2ebe53b466794aeca5614610a0cbf67d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ0NTM2Mw_size_16_color_FFFFFF_t_70 2]: /images/20221119/154017c3f57e4ebe983cc6a16f16874e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ0NTM2Mw_size_16_color_FFFFFF_t_70 3]: /images/20221119/2de32b0675e54e628343c05b736cc0a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ0NTM2Mw_size_16_color_FFFFFF_t_70 4]: /images/20221119/88af8801283f4618a158b3386152804f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ0NTM2Mw_size_16_color_FFFFFF_t_70 5]: /images/20221119/d653bc0a334947d0991403d3167e6609.png