基于 uniapp+vue3 搭建跨多端项目

#夏日生活打卡季#

这段时间一直在学习uniapp结合vue3开发多端项目实践。hbuilderx内置的vue3模块，使用了vite4.x构建，速度相比以前快了很多。

HBuilderX: 3.8.4
Vite: 4.2.1
uView-Plus: 3.1.31

今天就主要讲解通过hbuilderx可视化编辑器创建项目。

• 点击编辑器的文件 > 新建 > 项目（快捷键Ctrl+N）

• 选择uni-app项目，输入项目名/路径，选择项目模板，勾选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状态管理。

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

OK，以上就是uniapp vue3搭建项目的一些分享，希望对大家有所帮助哈~~