vue3引入vant组件库并进行rem适配方案

原创已于 2023-01-10 16:57:07 修改 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#1024程序员节

于 2022-10-24 10:47:57 首次发布

vue 专栏收录该内容

4 篇文章

订阅专栏

这篇博客介绍了如何安装vant3组件库，并详细讲解了使用rem单位进行移动端适配的步骤。首先通过npm安装vant和postcss-pxtorem，然后在main.js中引入flexible.js。接着，在postcss.config.js文件中配置postcss-pxtorem，设置rootValue，确保适配效果。此教程适合前端开发者进行移动页面的开发和优化。

1.安装vant3组件库

npm i vant

1
2.如果需要使用 rem 单位进行适配，官方推荐使用以下两个工具：

npm i postcss-pxtorem lib-flexible

1
3.在main.js中引入（千万别忘记）

// 移动端适配

import 'lib-flexible/flexible.js'

1
2
4.新建postcss.config.js文件配置

// postcss.config.js
const { sep } = require("path");

module.exports = ({ file }) => {
  const rootValue =
    file.dirname.indexOf(`node_modules${sep}vant`) !== -1 ? 37.5 : 75;

  return {
    plugins: {
      autoprefixer: {},
      "postcss-pxtorem": {
        rootValue,
        propList: ["*"],
      },
    },
  };
};

或者

module.exports = {
  plugins: {
    // postcss-pxtorem 插件的版本需要 >= 5.0.0
    'postcss-pxtorem': {
      rootValue({ file }) {return file.indexOf('vant') !== -1 ? 37.5 : 75;
      },
      propList: ['*'],
    },
  },
};