javascript 前端 前端框架 公众号开发(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组件：

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

3 参考

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

好文链接