公众号开发(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

总结

以上是生活随笔为你收集整理的公众号开发(3) —— vant移动端框架使用的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。