vue3.0中使用vant最新版本

vant已经更新出适合vue3.0的架构,官网地址 https://vant-contrib.gitee.io/vant/next/#/zh-CN/quickstart
首先,我们通过vue-cli3搭建好基本架构,之后通过官方引入vant组件:
第一种方式:通过npm安装

 npm i vant@next -S

第二种方式: 使用cdn

<!-- 引入样式文件 -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/vant@next/lib/index.css"
/>
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@next/lib/vant.min.js"></script>

其次,vant官网给我们提供了进阶用法:具体自行查看官网吧,兄弟姐妹们,在这里简单介绍下移动端适配配置方法:
1.安装postcss-pxtorem

npm install postcss-pxtorem --save-dev

2.安装amf-flexible

npm i -S  amfe-flexible

3.在main中引入amfe-flexible

import 'amfe-flexible'

4.在vue.config.js中进行配置

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({ // 把px单位换算成rem单位
            rootValue: 37.5, // vant官方使用的是37.5
            selectorBlackList: ['vant', 'mu'], // 忽略转换正则匹配项
            propList: ['*']
          })
        ]
      }
    }
  },
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
    } else {
      // 为开发环境修改配置...
    }
  }
}

具体尺寸按照设计图自行调配,蓝狐上如果事375px直接100px就是100px

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容