vue+vant 实现rem的转换

1. 搭建环境

1.1.输入 vue ui

在这里插入图片描述

1.2. create project 创建项目

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

1.3. 选择手动安装

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

1.4. 选择配置文件

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

1.5. 选择版本和postcss配置

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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)]

2. 启动项目

在这里插入图片描述

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

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

2.2. 点击启动

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

2.3. 启动成功

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

3. 安装vant

3.1. 找到Dependencies–>install

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

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

3.2. 安装成功

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

4. vue项目中使用vant

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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)]

4.3. 测试是否可以使用vant

    1. 在about.vue页面写入:

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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)]

    3. 刷新页面:

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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@5.1.1   
or
cnpm i postcss-pxtorem@5.1.1   

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

5.2. 命令安装:amfe-flexible

yarn add amfe-flexible

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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)]

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

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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)]

5.6. 在浏览器测试

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

  • 这是在plus下的

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

  • 在iPhone6测试一下,看看是否改变了

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

变小了,说明我们自适应成功了!!!

Logo

前往低代码交流专区

更多推荐