vant框架的使用

我的有道云笔记

一、通过脚手架安装vant

二、引入vant

2.1、方式一:按需引入(推荐)

步骤

• 1.安装vant
  

• 2.下载插件
  
  

• 3.在 babel.config.js 中配置
  

• 4.引入需要的标签,若只有一处使用，则在需要的页面引入，若多处使用，在main.js引入
  
  运行结果
  

2.2、方式二：手动按需引入组件

2.3、方式三：导入所有组件

Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。
步骤

• 1.安装vant框架

• 2.main.js全局引入
  

• 3.然后再页面上使用‘
  

运行结果

三、浏览器适配

步骤

• 1.在当前项目安装postcss-px-to-viewport插件
  
  
• 2.在当前项目创建postcss.config.js并放如下代码
  

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375,
    },
  }
};

• 3.设置自己想要的样式(这里我是为了占屏幕一半)
  
  运行结果