vant介绍

(国内镜像文档)[https://vant-contrib.gitee.io/vant/#/zh-CN/]
(github主页)[https://github.com/youzan/vant]

安装

在新项目中使用 Vant 时，推荐使用 Vue 官方提供的脚手架 Vue Cli 创建项目

# 安装 Vue Cli
npm install -g @vue/cli

# 创建一个项目
vue create myPro

# 通过 npm 安装
npm i vant -S

# 通过 yarn 安装
yarn add vant

引入ui组件

手动按需引入组件

在不使用插件的情况下，可以手动引入需要的组件

import Button from 'vant/lib/button'
import 'vant/lib/button/style'

导入所有组件

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

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

配置按需引入后，将不允许直接导入所有组件

rem适配

在 src 中新建 rem.js 文件

// 设置 rem 函数
function setRem () {

// 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
//得到html的Dom元素
    let htmlDom = document.getElementsByTagName('html')[0];
//设置根元素字体大小
    htmlDom.style.fontSize= htmlWidth/26 + 'px';
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
    setRem()
}

在 main.js 中引入

import './rem.js'

组件实例方法

Vant 中的许多组件提供了实例方法，调用实例方法时，我们需要通过 ref 来注册组件引用信息，引用信息将会注册在父组件的$refs对象上。注册完成后，我们可以通过this.$refs.xxx访问到对应的组件实例，并调用上面的实例方法。

// 将该组件绑定到 this.$refs.checkbox 上
<van-checkbox v-model="checked" ref="checkbox">
  复选框
</van-checkbox>
export default {
  data() {
    return {
      checked: false,
    };
  },
  // 注意：组件挂载后才能访问到 ref 对象
  mounted() {
    this.$refs.checkbox.toggle();
  },
}

样式修改

新建 resetui.less ，在首页面中引入

import '../resetui.less'

每个子页面的根节点设置class，某些需要修改的样式在对应的class下修改，不会全局污染

.zxzx-content{
    .van-nav-bar__text{
        color: #00a0e8
    }
    .van-nav-bar .van-icon{
        color: #00a0e8
    }
    .van-search{
        padding: 0
    }
}

代码规范