vue 基于vant rem H5搭建

1、搭建脚手架
2、安装vant-ui

# 安装 1.x 稳定版本
npm i vant -S
然后在mian.js引进全部
import Vant from 'vant';
import 'vant/lib/index.css';
import "./assets/css/vant.scss"; //组件自定义样式
Vue.use(Vant);

//在js里面使用直接引进单个的
import { Toast } from "vant";
//使用
Toast.fail(error.message);
//组件js使用需要注意的是,不能直接使用，需要加$
this.$toast.fail(res.data.message);

自动按需引入组件 (推荐)

 babel-plugin-import是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

# 安装插件
npm i babel-plugin-import -D

// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

// 接着你可以在代码中直接引入 Vant 组件
// 插件会自动将代码转化为方式二中的按需引入形式
import { Button } from 'vant';

在不使用插件的情况下，可以手动引入需要的组件
import Button from 'vant/lib/button';
import 'vant/lib/button/style';

3、引进rem

*   [postcss-pxtorem](https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fcuth%2Fpostcss-pxtorem) 是一款 postcss 插件，用于将单位转化为 rem
*   [lib-flexible](https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Famfe%2Flib-flexible) 用于设置 rem 基准值

1.下载lib-flexible

npm i lib-flexible --save

2.在main.js中引入lib-flexible
再创建一个rem.js文件

import 'lib-flexible/flexible'
//rem.js文件代码 ，再mian.js引进
// 基准大小
const baseSize = 32
// 设置 rem 函数
function setRem () {
  // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 375
  console.log(scale)
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
  console.log(document.documentElement.style.fontSize)
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

3.安装 postcss-pxtorem

npm install postcss-pxtorem -D

4.在根目录下创建 vue.config.js配置postcss-pxtorem

module.exports = {
    ...
    ...
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({
                        rootValue: 37.5, // 换算的基数
                        selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
                        propList: ['*'],
                    }),
                ]
            }
        }
    },
}