vant的使用

1、安装vant

# 安装 1.x 稳定版本
npm i vant -S

2、然后在main.js引进来

import { Button } from 'vant'
import 'vant/lib/index.css';
Vue.use(Button)

3、在页面使用就行了

 <van-button type="warning">主要按钮</van-button>

第二种按需引进
1、

# 安装 1.x 稳定版本
npm i vant -S

2、

# 安装插件
npm i babel-plugin-import -D

3、其后在babel.config.js 中配置

module.exports = {
presets: [
    '@vue/cli-plugin-babel/preset'
],
//配置vant
plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ],
#如果更新了vue版本后。重新配置上述文件
"plugins": [
    "transform-vue-jsx", 
    "transform-runtime",
    ["import", [{ "libraryName": "vant","libraryDirectory":"es","style": true }]]
  ]
}

3、接着你可以在代码中直接引入 Vant 组件

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <van-button type="default">默认按钮</van-button>
    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
  </div>
</template>
<script>
  import {
    Button
  } from 'vant';
  export default {
    data() {
      return {
      }
    },
    components: {
      [Button.name]: Button,
    }
  }
</script>

4、也可以在main.js引进

import { Button } from 'vant'
Vue.use(Button)
#引进多个写法
import { Toast, Button, Tabbar,TabbarItem, } from 'vant';
Vue.use(Toast).use(Button);
Vue.use(Tabbar).use(TabbarItem);

二、小程序使用vant
https://www.jb51.net/article/162671.htm

Rem 适配移动端第一种方法

Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具

• postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
• lib-flexible 用于设置 rem 基准值
  lib-flexible会自动在为你添加meta name="viewport"的标签
  同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。
  假如设计稿的宽度是375px，此时1rem应该等于37.5px。
  假如设计稿的宽度是750px，此时1rem应该等于75px。

由于flexible会动态给页面header中添加<meta name='viewport' >标签，所以务必请把目录 public/index.html 中的这个标签删除

1、下载lib-flexible

npm i lib-flexible --save

2、在main.js中引入lib-flexible

import 'lib-flexible/flexible'

3.安装 postcss-pxtorem

npm install postcss-px2rem --save

4.在根目录下创建 vue.config.js配置postcss-pxtorem

module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({
                        rootValue: 37.5, // 换算的基数
                        selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
                        propList: ['*'],
                    }),
                ]
            }
        }
    },
}

配置完成后，即可在开发中直接使用 px 单位开发

Rem 适配移动端第二种方法 vue-cli3.0中使用 postcss-pxtorem

https://www.jianshu.com/p/68c24b3b8200
还可以通过vw百分比布局移动端

Vue-cli3.x-自定义基础配置

https://www.jianshu.com/p/a0959e056125