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

2023-7-15

学习了下Uniapp结合Vite4 Vue3搭建跨端移动应用项目，二者搭配构建运行速度快，兼容性也不错，真香~~

HBuilderX: 3.8.4vite: 4.2.1uview-plus: 3.1.31

创建uniapp+vue3基础项目

uniapp提供了 HBuilderX 可视化界面、vue-cli命令行 两种方式快速构建项目。

本次主要讲解hbuilderx编辑器创建项目。如果想使用vue-cli命令创建项目，大家可以去官网查看。

输入项目名/路径，选择项目模板，勾选vue3版本，点击创建，即可成功创建。

接下来就是运行到浏览器，或者运行到手机/模拟器。

到这一步，一个简单的uniapp+vue3项目就搭建启动好了。

main.js入口

因为本次重点是vue3开发，就去掉了vue2兼容写法。

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

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

这样在其它.vue页面一样可以获取到globalData值了。

uniapp+pinia状态管理

使用hbuilderx创建的项目，已经内置了vuex和pinia状态管理了。

如果是使用vue-cli命令创建，则需要安装pinia了。

npm i piniayarn add pinia

直接在main.js中引入pinia，上面已经有引入方法。

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

接下来在.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-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';

在App.vue首行引入基础样式文件。

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

如果不是通过uni_modules方式引入，直接下载文件，复制uview-plus文件夹到根目录下。

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>

需要额外的配置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环境变量。

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: {                // ...            }        }    }})

配置好后就可以在.vue页面就可以使用process.env环境变量了。

综上，一个基础版的uniapp vue3项目就搭建差不多了，后面就是开发编码的事情了。

THE END

Vue全家桶：单文件组件

<<上一篇

MySQL Undo log的存储机制及工作原理图解

下一篇>>