vue移动端vant+postcss适配

  • 首先vue create XXX创建vue项目
  • 安装vant,vant官网https://vant-contrib.gitee.io/vant/v2/#/zh-CN/quickstart
  • 使用vue2的话,安装vant2 npm i vant@latest-v2 -S
  • 选用自动按需引入组件的方式的话,下载相关依赖 npm i babel-plugin-import -D
  • 同时在.babelrc 中添加配置,如果创建vue项目时选择的是生成babel.config,则在babel.config添加配置
// 在.babelrc 或babel.config中添加配置
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}
  • 下载postcss postcss-pxtorem@5.1.1 lib-flexible
  • npm i postcss postcss-pxtorem@5.1.1 lib-flexible
  • main.js引入import 'lib-flexible/flexible'
  • 在postcss.config.js中做配置
// postcss.config.js
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
    },
  },
};
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容