Uniapp结合Vite4 Vue3搭建跨端移动应用项目

HBuilderX: 3.8.4vite: 4.2.1uview-plus: 3.1.31

import App from './App'
import uView from '@/uview-plus'
import { createSSRApp } from 'vue'import { createPinia } from 'pinia'
export function createApp() {  const app = createSSRApp(App)  const pinia = createPinia()  app.use(pinia)  app.use(uView)  return {    app,    pinia  }}

<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>

[  "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"]

<script>      export default {          globalData: {              text: 'text'          }    }  </script>

onLaunch(() => {  console.log('App Launch!')
  getApp().globalData = {    a: 123,    b: 456  }
  // 初始化  initSys()})

<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 MP        customBar = statusBar + (e.platform == 'android' ? 50 : 45)        // #endif                // #ifdef MP-WEIXIN        // 获取胶囊按钮的布局位置信息        let menu = 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 = statusBar        app.globalData.customBarH = customBar                app.globalData.platform = e.platform      }    })  }</script>

npm i piniayarn add pinia

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

<view>计数：{{counter.count}}</view><button @click="handleAdd">增加</button>
<script setup>    import { counterStore } from '@/store/counter'
    const counter = counterStore()
    const handleAdd = () => {        counter.increment()    }</script>

// main.jsimport uviewPlus from '@/uni_modules/uview-plus'
import { createSSRApp } from 'vue'export function createApp() {  const app = createSSRApp(App)  app.use(uviewPlus)  return {    app  }}

/* uni.scss */@import '@/uni_modules/uview-plus/theme.scss';

<style lang="scss">    /* 注意要写在第一行，同时给style标签加入lang="scss"属性 */    @import "@/uni_modules/uview-plus/index.scss";</style>

import App from './App'
import uView from '@/uview-plus'
import { createSSRApp } from 'vue'
export function createApp() {    const app = createSSRApp(App)    app.use(uView)    return {        app,        pinia    }}
// 在根目录uni.scss中引入主题样式@import '@/uview-plus/theme.scss';
// 在app.vue中引入基础样式<style lang="scss">    @import "@/uview-plus/index.scss";</style>

// pages.json{    "custom": {        // 引入uview-plus组件库        "^u-(.*)": "@/uview-plus/components/u-$1/u-$1.vue"    }        // ...}

import { defineConfig, loadEnv } from 'vite'import uni from '@dcloudio/vite-plugin-uni'import { resolve } from 'path'import { parseEnv } from './utils/env'
export default defineConfig(({ command, mode }) => {    const viteEnv = loadEnv(mode, __dirname)    const env = parseEnv(viteEnv)
    return {        plugins: [            uni()        ],                define: {            // 自定义配置环境变量            'process.env.VITE_APPNAME': JSON.stringify('uniapp-vite4-vue3'),            'process.env.VITE_ENV': env        },
        /*构建选项*/        build: {            // ...        },        esbuild: {            // 打包去除 console.log 和 debugger            // drop: env.VITE_DROP_CONSOLE && command === 'build' ? ["console", "debugger"] : []        },
        /*开发服务器选项*/        server: {            // 端口            port: env.VITE_PORT,            // 运行时自动打开浏览器            open: env.VITE_OPEN,            // 代理配置            proxy: {                // ...            }        }    }})