uniapp项目中使用vue3开发多端项目实践

简介: uniapp项目中使用vue3开发多端项目实践

本项目中使用vue3开发多端项目实践,hbuilderx内置vue3模块,使用了vite4.x构建,编译构建项目的速度比火箭还快,超爽!!!!

1、使用版本说明

HBuilderX: 3.8.4
Vite: 4.2.1
uView-Plus: 3.1.31

2、创建项目

通过hbuilderx可视化编辑器创建项目

点击编辑器的文件 > 新建 > 项目(快捷键Ctrl+N)

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

3、运行项目

点击编辑器的运行 > 运行到浏览器 > 选择浏览器

当然也可以运行到手机或模拟器、运行到小程序工具。

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

4、uniapp+pinia本地缓存插件PiniaPluginUnistorage

pinia-plugin-unistorage 基于uniapp pinia实现多端的更简单的全局本地数据缓存

该插件是 pinia-plugin-persistedstate 的 uniapp 版本。

npm安装插件

npm i pinia-plugin-unistorage -D

在main.ts中引入

import { createSSRApp } from 'vue'
import * as Pinia from 'pinia'
import { createUnistorage } from 'pinia-plugin-unistorage'
export function createApp() {
    const app = createSSRApp(App)
    const store = Pinia.createPinia()
    // 关键代码
    store.use(createUnistorage())
    app.use(store)
    return {
        app,
        Pinia // 此处必须将 Pinia 返回
    }
}

使用组件

import { defineStore } from 'pinia'
export const useStore = defineStore('main', {
    state() {
        return {
            someState: 'hello pinia'
        }
    },
    unistorage: true // 开启后对 state 的数据读写都将持久化
})

支持vue3 setup 语法

import { defineStore } from 'pinia'
export const useStore = defineStore(
    'main',
    () => {
        const someState = ref('hello pinia')
        return { someState }
    },
    {
        unistorage: true // 开启后对 state 的数据读写都将持久化
    }
)

插件地址

https://ext.dcloud.net.cn/plugin?id=8081

仓库地址

https://github.com/dishait/pinia-plugin-unistorage

5、 uni-app + vue3 + vite + ts 项目结构

  • index.html 首页入口文件。
  • package.json 项目配置文件。
  • tsconfig.json typescript 配置文件。
  • vite.config.ts vite 的配置文件。

src 存放开发资源文件,基本要做的事情都在这个目录内,里面又包含了几个目录文件:

  • pages 存放所有页面文件,我们创建的页面组件都放入该文件夹。
  • static 存放静态资源的文件夹。
  • App.vue 页面入口文件,所有页面都在 App.vue 下进行切换。
  • env.d.ts 第三方模块的类型声明文件。
  • main.ts 项目入口文件,因为使用 ts 语法,所以后缀是 .ts
  • mainfest.json 应用配置文件,用于指定应用名称、图标、权限等。
  • pages.json 全局配置文件,可以配置页面文件路径、窗口样式、原生的导航栏、底部tab栏等。
  • uni.scss 是uni-app的样式包,在其他文件中可以快速引用样式包内的样式。
目录
相关文章
|
3天前
|
开发框架 监控 物联网
【Uniapp 专栏】探索 Uniapp 开发的更高级应用场景
【5月更文挑战第17天】Uniapp作为跨平台开发框架,在物联网、实时数据监控、企业级应用、地理定位和教育、电商领域展现出广泛应用潜力。通过蓝牙连接智能家居,实时展示数据变化,构建复杂业务流程,定位服务及互动学习平台,它提供了创新解决方案。随着技术发展,Uniapp将继续为开发者创造更多机遇和挑战,推动移动应用领域的前进。
【Uniapp 专栏】探索 Uniapp 开发的更高级应用场景
|
3天前
|
数据处理 开发者
【Uniapp 专栏】提升 Uniapp 开发效率的进阶方法
【5月更文挑战第17天】提升Uniapp开发效率的关键包括组件化、模板语法、数据处理和代码组织。通过封装组件如通用按钮,利用列表渲染生成多个元素,使用计算属性和方法处理复杂逻辑,以及采用预处理器如Sass编写样式。此外,良好的代码结构和使用开发者工具进行调试也是重要环节。掌握这些进阶技巧能帮助开发者更高效地构建高质量应用。
【Uniapp 专栏】提升 Uniapp 开发效率的进阶方法
|
2天前
|
监控 安全 NoSQL
采用java+springboot+vue.js+uniapp开发的一整套云MES系统源码 MES制造管理系统源码
MES系统是一套具备实时管理能力,建立一个全面的、集成的、稳定的制造物流质量控制体系;对生产线、工艺、人员、品质、效率等多方位的监控、分析、改进,满足精细化、透明化、自动化、实时化、数据化、一体化管理,实现企业柔性化制造管理。
21 3
|
3天前
|
缓存 数据处理 UED
【Uniapp 专栏】Uniapp 开发中的疑难问题解决与进阶策略
【5月更文挑战第17天】在 Uniapp 开发中,解决页面间数据传递、网络请求异常、屏幕适配及性能优化等问题至关重要。利用路由参数传递复杂数据,如`uni.navigateTo`和`JSON.stringify`;处理网络请求异常时,添加错误处理机制增强健壮性;使用响应式设计和缓存策略优化布局和性能。针对组件问题,需排查依赖和配置,而平台差异则需定制化处理。通过不断学习和实践,提升开发技能,确保项目成功实施。
【Uniapp 专栏】Uniapp 开发中的疑难问题解决与进阶策略
【Uniapp 专栏】迈向 Uniapp 开发高手之路的进阶技巧
【5月更文挑战第16天】掌握Uniapp进阶技巧,包括深入理解组件化开发,如创建可复用的按钮组件;运用Vuex进行状态管理,便于全局状态操作;善用Flex布局实现灵活页面设计;合理使用请求库并设置拦截器处理错误和优化请求;同时关注性能优化,提升开发效率和应用质量。
【Uniapp 专栏】迈向 Uniapp 开发高手之路的进阶技巧
|
5天前
|
Android开发 UED 开发者
【Uniapp 专栏】比较 Uniapp 与原生开发的差异与适用场景
【5月更文挑战第15天】UniApp与原生开发各有千秋。UniApp以高效跨平台著称,一套代码覆盖多平台,降低开发成本,适合快速开发简单应用。原生开发则提供优秀性能和用户体验,适合对性能要求高的复杂应用。两者在功能实现和维护上各有优势,开发者需根据项目需求权衡选择。随着技术进步,两者都在不断优化,为移动应用开发带来新机遇。
【Uniapp 专栏】比较 Uniapp 与原生开发的差异与适用场景
|
5天前
|
数据安全/隐私保护 Android开发 UED
【Uniapp 专栏】Uniapp 在社交应用开发中的案例研究
【5月更文挑战第12天】本文探讨了一个使用Uniapp开发的社交应用案例,该应用提供用户注册登录、个人资料管理、好友关系、动态发布、消息聊天等功能。Uniapp的跨平台特性和丰富的组件简化了开发过程,确保应用在iOS和Android上的兼容性。特色功能如话题标签、点赞评论和附近的人增加了用户互动。设计上追求简洁美观,同时重视数据安全。此案例展示了Uniapp在社交应用开发的潜力和优势。
|
5天前
|
数据安全/隐私保护 UED 开发者
【Uniapp 专栏】Uniapp 项目中路由管理的实战经验分享
【5月更文挑战第12天】在 Uniapp 项目中,路由管理至关重要,涉及清晰的规划、配置和权限控制。合理设计路由结构便于开发维护,设置可读性高的页面路径和参数。根据场景选择参数传递和导航方式,处理嵌套路由,确保数据准确无误。添加权限判断保护受限页面,利用过渡动画提升用户体验。在复杂项目中,采用模块化管理路由,结合状态管理工具优化路由状态。持续测试和优化,以实现高效、流畅的用户导航。这些实战经验有助于提升 Uniapp 应用的质量。
|
5天前
|
编解码 缓存 UED
【Uniapp 专栏】Uniapp 开发实战:打造高效页面布局技巧
【5月更文挑战第12天】在 Uniapp 开发中,高效页面布局关乎用户体验和应用性能。关键技巧包括:规划清晰的页面结构,利用 Flex 布局组件,精确控制元素尺寸和位置,实现响应式设计,保持布局简洁,优化加载性能,恰当运用色彩和字体,添加交互性动画,以及组织良好代码结构。通过不断学习和实践,开发者能创建出美观且高性能的页面,提升应用的整体质量。
|
5天前
|
搜索推荐 开发者
【Uniapp 专栏】探究 Uniapp 组件化开发的奥秘
【5月更文挑战第12天】Uniapp的组件化开发模式正引领移动应用开发潮流,提升开发效率并简化维护。通过将应用拆分为独立、可复用的组件,开发者能快速构建和优化功能,降低出错风险。基础组件满足基本需求,自定义组件则针对特定业务场景。Uniapp提供简洁的组件定义、通信支持及组件库管理,促进数据共享和功能协同。然而,组件设计需考虑通用性、扩展性和依赖管理。组件化开发在Uniapp中日益重要,为开发者创造更多价值,激发创新潜力。
【Uniapp 专栏】探究 Uniapp 组件化开发的奥秘

热门文章

最新文章