公众号开发(3) —— vant移动端框架使用

常见的vue移动端组件库有vux、cube-ui、Mint-UI、Vant等，其中Vant 是一个比较轻量、可靠的移动端组件库，同时支持vue2 和vue3,对于移动端的适配性更好，所以公众号开发的过程中选择vant作为前端框架，以下记录vue2中vant的使用过程.

1 vant安装

通过npm安装vant：

npm i vant@latest-v2 -S

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式，为提高前端页面的性能，使用babel-plugin-import 插件按需引入vant，babel-plugin-import 插件安装：

npm i babel-plugin-import -D

安装完成后在 babel.config.js 中添加支持按需引入配置：

module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset'
    ],
    //添加支持按需引入配置
    plugins: [
        ['import', {
            libraryName: 'vant',
            libraryDirectory: 'es',
            style: true
        }, 'vant']
    ]
}

2 vant使用

新建src/util/vant.js文件，用以全局注册Vant组件，vant.js中暂时只引入vant Button组件：

import Vue from 'vue'
import { Button } from 'vant'
Vue.use(Button)

在main.js里面导入vant.js：

//注册全局的Vant组件
import './util/vant'

在Login.vue中直接使用van-button组件：

<template>
  <div>
    <h2>我是Login</h2>
    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
  </div>
</template>

微信web 开发者工具中打开vue项目地址，看到效果如下：

3 参考

1 https://vant-ui.github.io/vant/v2/#/zh-CN/quickstart
2 https://www.jianshu.com/p/b4b725eceace