vant2.x 源码学习 -- 01 vant简介

2021-05-24 本文已影响0人小q

Vant是有赞前端团队开源的 移动端 组件库。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本。本次源码学习为Vue2版本的Vant源码学习。

特性

提供 60 多个高质量组件，覆盖移动端各类场景
性能极佳，组件平均体积不到 1kb（min+gzip）
单元测试覆盖率 90%+，提供稳定性保障
完善的中英文文档和示例
支持 Vue 2 & Vue 3
支持按需引入
支持主题定制
支持国际化
支持 TypeScript
支持 SSR

浏览器支持

Vant 2 支持现代浏览器以及 Android >= 4.0、iOS >= 8.0。
Vant 3 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一致）。

快速上手

安装

npm 安装

# Vue 2 项目，安装 Vant 2：
npm i vant -S

CDN安装

<!-- 引入样式文件 -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css"
/>

<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>

<script>
  // 在 #app 标签下渲染一个按钮组件
  new Vue({
    el: '#app',
    template: `<van-button>按钮</van-button>`,
  });

  // 调用函数组件，弹出一个 Toast
  vant.Toast('提示');

  // 通过 CDN 引入时不会自动注册 Lazyload 组件
  // 可以通过下面的方式手动注册
  Vue.use(vant.Lazyload);
</script>

你可以通过以下免费 CDN 服务来使用 Vant:

jsdelivr
cdnjs
unpkg
通过脚手架安装

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

# 创建一个项目
vue create hello-world

# 创建完成后，可以通过命令打开图形化界面，如下图所示
vue ui

image.png

引入组件

自动按需引入（推荐）

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。

# 安装插件
npm i babel-plugin-import -D
// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

// 接着你可以在代码中直接引入 Vant 组件
// 插件会自动将代码转化为方式二中的按需引入形式
import { Button } from 'vant';

Tips: 如果你在使用 TypeScript，可以使用 ts-import-plugin 实现按需引入。

手动按需引入组件

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);

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

组件注册
Vant 支持多种组件注册方式。
• 全局注册
全局注册后，你可以在 app 下的任意子组件中使用注册的 Vant 组件。

import Vue from 'vue';
import { Button } from 'vant';

// 方式一. 通过 Vue.use 注册
// 注册完成后，在模板中通过 <van-button> 或 <VanButton> 标签来使用按钮组件
Vue.use(Button);

// 方式二. 通过 Vue.component 注册
// 注册完成后，在模板中通过 <van-button> 标签来使用按钮组件
Vue.component(Button.name, Button);

• 局部注册
局部注册后，你可以在当前组件中使用注册的 Vant 组件。

import { Button } from 'vant';

export default {
  components: {
    [Button.name]: Button,
  },
};

浏览器适配

• Viewport 布局
Vant 默认使用 px 作为样式单位，如果需要使用 viewport 单位 (vw, vh, vmin, vmax)，推荐使用 postcss-px-to-viewport 进行转换。
postcss-px-to-viewport 是一款 PostCSS 插件，用于将 px 单位转化为 vw/vh 单位。
• PostCSS PostCSS 示例配置
下面提供了一份基本的 PostCSS 示例配置，可以在此配置的基础上根据项目需求进行修改。

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

Tips: 在配置 postcss-loader 时，应避免 ignore node_modules 目录，否则将导致 Vant 样式无法被编译。

• Rem 布局适配
如果需要使用 rem 单位进行适配，推荐使用以下两个工具：
postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位
lib-flexible 用于设置 rem 基准值

• PostCSS 示例配置
下面提供了一份基本的 PostCSS 示例配置，可以在此配置的基础上根据项目需求进行修改。

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
    },
  },
};

• 其他设计稿尺寸
如果设计稿的尺寸不是 375，而是 750 或其他大小，可以将 rootValue 配置调整为:

// postcss.config.js
module.exports = {
  plugins: {
    // postcss-pxtorem 插件的版本需要 >= 5.0.0
    'postcss-pxtorem': {
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75;
      },
        propList: ['*'],
    },
  },
};

• 桌面端适配
Vant 是一个面向移动端的组件库，因此默认只适配了移动端设备，这意味着组件只监听了移动端的 touch 事件，没有监听桌面端的 mouse 事件。
如果你需要在桌面端使用 Vant，可以引入我们提供的 @vant/touch-emulator，这个库会在桌面端自动将 mouse 事件转换成对应的 touch 事件，使得组件能够在桌面端使用。

安装模块

npm i @vant/touch-emulator -S
// 引入模块后自动生效
import '@vant/touch-emulator';
底部安全区适配

iPhone X 等机型底部存在底部指示条，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行安全区适配。Vant 中部分组件提供了 safe-area-inset-top 或 safe-area-inset-bottom 属性，设置该属性后，即可在对应的机型上开启适配，如下示例：

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
/>

<!-- 开启顶部安全区适配 -->
<van-nav-bar safe-area-inset-top />

<!-- 开启底部安全区适配 -->
<van-number-keyboard safe-area-inset-bottom />

组件

组件分为基础组件，表单组件，反馈组件，展示组件，导航组件，业务组件这几类。

结语

以上就是参照文档自己觉得比较重要的vant用法与信息。

vant2.x 源码学习 -- 01 vant简介

特性

相关链接

浏览器支持

快速上手

安装

引入组件

浏览器适配

组件

结语

猜你喜欢

热点阅读