前段时间埃布鲁县自学了下Uniapp紧密结合Vite4 Vue3构筑跨端终端应用领域工程项目，两者配搭构筑运转速度慢，相容性也极好，通心面~~
建立uniapp+vue3此基础工程项目
uniapp提供更多了 HBuilderX 建模介面、vue-cli配置文件 三种形式加速构筑工程项目。
此次主要就传授hbuilderxGUI建立工程项目。假如想采用vue-cli指示建立工程项目，我们能去官方网站查阅。
输入工程项目名/路径，选择工程项目模板，勾选vue3版本，点击建立，即可成功建立。
接下来就是运转到浏览器，或者运转到手机/模拟器。
到这一步，一个简单的uniapp+vue3工程项目就构筑启动好了。
main.js入口
因为此次重点是vue3开发，就去掉了vue2兼容写法。
import App from ./Appimport uView from @/uview-plusimport{ createSSRApp }from vueimport { createPinia } from piniaexport function createApp() { constapp = createSSRApp(App) const pinia = createPinia() app.use(pinia) app.use(uView) return { app, pinia }}App.vue setup语法糖
uniapp vue3支持setup语法糖编码及ts语法了。
建立好的app.vue模板也是vue2写法，改造成vue3 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>注意：onLaunch、onShow等生命周期是通过import形式引入。
目前@dcloudio/uni-app支持如下导入方法。
[ “getSsrGlobalData”, “onAddToFavorites”, “onBackPress”, “onError”, “onHide”, “onLaunch”, “onLoad”, “onNavigationBarButtonTap”, “onNavigationBarSearchInputChanged”, “onNavigationBarSearchInputClicked”, “onNavigationBarSearchInputConfirmed”, “onNavigationBarSearchInputFocusChanged”, “onPageNotFound”, “onPageScroll”, “onPullDownRefresh”, “onReachBottom”, “onReady”, “onResize”, “onShareAppMessage”, “onShareTimeline”, “onShow”, “onTabItemTap”, “onThemeChange”, “onUnhandledRejection”, “onUnload”, “resolveEasycom”, “shallowSsrRef”, “ssrRef”]我们都知道在App.vue vue2中定义globalData配置。
<script> export default { globalData: { text: text } } </script>那么如何在uniapp vue3 setup语法中采用globalData？
onLaunch(() => { console.log(App Launch!)getApp().globalData = { a: 123, b: 456 } // 初始化 initSys()})我们也可以直接给globalData赋值。
<script setup> import{ onLaunch, onShow, onHide }from @dcloudio/uni-app onLaunch(() => { console.log(App Launch!) // 初始化 initSys() }) onShow(()=> { console.log(App Show!) }) onHide(() => { console.log(App Hide!) }) /** * 初始化系统 */ const initSys = () => {uni.getSystemInfo({ success: (e) => { let statusBar = e.statusBarHeight let customBar // #ifndef MPcustomBar = statusBar + (e.platform ==android ? 50 : 45) // #endif // #ifdef MP-WEIXIN letmenu = wx.getMenuButtonBoundingClientRect() // 导航栏高度 = 胶囊下距离 + 胶囊上距离 – 状态栏高度customBar = menu.bottom + menu.top – statusBar // #endif // #ifdef MP-ALIPAY customBar = statusBar + e.titleBarHeight // #endif // 兼容nvue写法（H5/小程序/APP/APP-Nvue） const app = getApp() app.globalData.statusBarH = statusBarapp.globalData.customBarH = customBar app.globalData.platform = e.platform } }) }</script>uniapp+pinia状态管理
采用hbuilderx建立的工程项目，已经内置了vuex和pinia状态管理了。
假如是采用vue-cli指示建立，则需要安装pinia了。
npm i piniayarn add pinia直接在main.js中引入pinia，上面已经有引入方法。
 fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E "uniapp-vite4-vue3整合创建跨端应用8")
接下来在.vue页面引入counter并采用。
<view>计数：{{counter.count}}</view><button @click=“handleAdd”>增加</button><script setup> import{ counterStore }from @/store/counter const counter = counterStore() const handleAdd = () => {counter.increment() }</script>uniapp vue3组件库uview-plus
uniapp vue3组件官方提供更多了的uni-ui组件库。
无需引入、注册即可加速采用。在代码区键入 u，拉出各种内置或uni-ui的组件列表。
目前uview-plus也支持vue3语法了。
采用hbuilderx工具导入
引入uview-plus及样式文件
// main.jsimport uviewPlus from @/uni_modules/uview-plusimport { createSSRApp } from vueexport function createApp() { const app = createSSRApp(App)app.use(uviewPlus) return { app }}/* uni.scss */@import @/uni_modules/uview-plus/theme.scss;在App.vue首行引入此基础样式文件。
<style lang=“scss”> /* 注意要写在第一行，同时给style标签加入lang=”scss”属性 */ @import “@/uni_modules/uview-plus/index.scss”;</style>假如不是通过uni_modules形式引入，直接下载文件，复制uview-plus文件夹到根目录下。
需要额外的配置easycom引入形式。
// pages.json{ “custom”: { // 引入uview-plus组件库 “^u-(.*)”: “@/uview-plus/components/u-$1/u-$1.vue” } // …}uniapp vue3配置vite.config.js
uniapp vue3工程项目还能自定义配置vite.config.js，另外还能自定义.env环境变量。
配置好后就能在.vue页面就能采用process.env环境变量了。
综上，一个此基础版的uniapp vue3工程项目就构筑差不多了，后面就是开发编码的事情了。
