常見的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移动端框架使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。