如何用uni-app+vue3+vant开发微信小程序-Toy模板网

这篇具有很好参考价值的文章主要介绍了如何用uni-app+vue3+vant开发微信小程序。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

uni-app之前一直只支持vue2语法，

2021年8月：新版支持了vue3 开发，App平台编译器升级为 Vite；

新版 uni-app 框架主要做了三大改进：

重写框架内核：基于vue3 + ts重写内置组件和API，实现更彻底、更高效的tree-shaking；
新增支持 Vite 构建工具，在H5平台实现秒开预览；
新增支持 Vue3.x，实现更灵活的开发方式，及更高的运行性能；

今天主要讲讲如何使用vue3+vant

1.创建项目

注意：建议使用HBuilder最新稳定版

HBuilder官网地址如何用uni-app+vue3+vant开发微信小程序

项目配置

如何用uni-app+vue3+vant开发微信小程序

2.下载vant

# 通过 npm 安装
npm i @vant/weapp -S --production

# 通过 yarn 安装
yarn add @vant/weapp --production

# 安装 0.x 版本
npm i vant-weapp -S --production

如何用uni-app+vue3+vant开发微信小程序

3.引入

与 /pages 同级创建 /wxcomponents 目录
复制node_modules-@vant-weapp-dist到wxcomponents文件夹
dist改名为vant

如何用uni-app+vue3+vant开发微信小程序

4.pages.json引入使用

在"globalStyle":{} 属性下加入以下片段，可按需引入具体需要全局引入的组件，引入规则如下

"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"app-plus": {
			"background": "#efeff4"
		},
		"usingComponents": {
			"van-button": "/wxcomponents/vant/button/index"
		}
	},

或在单个页面style对象{}中引入

{
		"path": "pages/index/index",
		"style": {
			"navigationBarTitleText": "首页",
			"usingComponents": {
				"van-button": "/wxcomponents/vant/button/index"
			}
		}
	}

如何用uni-app+vue3+vant开发微信小程序