现在越来越多项目都偏向于Vue3开发，想着uniapp搭配Vue3试试效果怎么样，接下来就是详细操作步骤。

初始化Uniapp + Vue3项目

 

 App.vue setup语法

<script setup>import {onLaunch,onShow,onHide} from '@dcloudio/uni-app'onLaunch(() => {console.log('App Launch!')})onShow(() => {console.log('App Show!')})onHide(() => {console.log('App Hide!')})
</script>

uniapp+pinia状态管理

uni-app已经内置了vuex和pinia两个状态管理，不需要安装即可使用。

 有一个很不错的学习网站推荐：Pinia（状态管理）

import {createPinia
} from 'pinia'const pinia = createPinia()
app.use(vant)

 新建一个store/counter.js文件

import { defineStore } from 'pinia'export const counterStore = defineStore('counter', {state: () => ({count: 0}),getters: {},actions: {increment() {this.count++}}
})

这样基本就引入和创建好了pinia配置文件了，接下来就在.vue页面使用

引入vant3框架 

项目官网地址：Vant 3 - Lightweight Mobile UI Components built on Vue

 根据项目文档中的快速开始安装

通过 npm 安装

在现有项目中使用 Vant 时，可以通过 npm 进行安装：

# Vue 3 项目，安装最新版 Vant
npm i vant

将vant 挂载到main文件中：

 // 引入vant
import vant from 'vant';
import 'vant/lib/index.css';
import 'vant/es/toast/style';app.use(vant)

这样子vant就引入，接下来就在.vue页面使用

效果图如下

项目还可以自定义配置vite.config.js文件

uniapp官网 vite.config.js介绍：uni-app官网

Vite 官网网站：配置 Vite | Vite 官方中文文档 

在vue项目中使用：

 

代码已放到gitee：uniapp+vue3+pinia+vant3: uniapp+vue3+pinia+vant3项目整合