vue+vant 实现 rem的转换

vue+vant 实现rem的转换

1. 搭建环境

1.1.输入 vue ui

1.2. create project 创建项目

1.3. 选择手动安装

1.4. 选择配置文件

1.5. 选择版本和postcss配置

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

1.7. 等待创建

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

1.8. 创建成功！！

2. 启动项目

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

2.2. 点击启动

2.3. 启动成功

3. 安装vant

3.1. 找到Dependencies–>install

3.2. 安装成功

4. vue项目中使用vant

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

• 写入配置：

  {
    "plugins": [
      ["import", {
        "libraryName": "vant",
        "libraryDirectory": "es",
        "style": true
      }]
    ]
  }
  

4.2. 安装依赖

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

4.3. 测试是否可以使用vant

• 1. 在about.vue页面写入：

     

     <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);
     

     

  3. 刷新页面：

     

  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   

5.2. 命令安装：amfe-flexible

yarn add amfe-flexible

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

	import 'amfe-flexible/index.js'

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">

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": [
		          "*"
		        ]
		      }
		    }
		  }

5.6. 在浏览器测试

• 这是在plus下的

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

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