美文网首页
vue移动端vant+postcss适配

vue移动端vant+postcss适配

作者: 萤火kin | 来源:发表于2022-03-07 15:11 被阅读0次
    • 首先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: ['*'],
        },
      },
    };
    

    相关文章

      网友评论

          本文标题:vue移动端vant+postcss适配

          本文链接:https://www.haomeiwen.com/subject/ptuarrtx.html