使用Vue2和Vant2写手机网页-优快云博客

1.效果

在这里插入图片描述

2.添加Vant2组件库

Vant2地址：https://vant-ui.github.io/vant/v2/#/zh-CN/home

2.1安装Vant2

npm i vant@latest-v2 -S

2.2配置Vant2

main.js文件中添加配置：

import Vant from 'vant'
import 'vant/lib/index.css'

Vue.use(Vant)

3.添加移动端样式适配

安装amfe-flexible和postcss-pxtorem
postcss-pxtorem：用于将px单位转换为rem单位
amfe-flexible：设置html中的font-size值

3.1安装

// -D只在开发环境中安装依赖
npm i postcss-pxtocss@5 -D
npm i amfe-flexible -S

3.2配置

①在main.js中添加配置：

import 'amfe-flexible'

②在项目根目录下创建postcss.config.js文件，加入以下配置：

// 修改此文件一定要重启 vue 项目
module.exports = {
  // px 自动转为 rem 插件
  // 需要安装，一定要注意和 vue2.x 版本兼容，这里用的是 @5版本
  plugins: {
    'postcss-pxtorem': {
      // 1rem = 37.5px
      rootValue: 37.5,
      // 所有写在 class 类样式中的尺寸单位的属性中的 px 都会帮你转换为 rem
      // style 中的 px 不会转换，建议少用 style
      propList: ['*'],
    },
  },
};