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

news2024/11/24 0:05:23

目录

      • 1、使用版本说明
      • 2、创建项目
      • 3、运行项目
      • 4、uniapp+pinia本地缓存插件PiniaPluginUnistorage
      • 5、 uni-app + vue3 + vite + ts 项目结构

本项目中使用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的样式包,在其他文件中可以快速引用样式包内的样式。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/671636.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

dpmsolver 论文核心整理

推导 DPM-Solver1的误差 由正文所述&#xff1a; 利用泰勒展开&#xff1a; B.3式就是换了个元 δ λ − λ s λ t − λ s \delta\frac{\lambda-\lambda_s}{\lambda_t-\lambda_s} δλt​−λs​λ−λs​​&#xff0c;代入论文公式(3.4)的积分项&#xff08;不含系数&…

一套完整的工厂车间现场管理指南,车间主管收藏好了!

车间是企业的基本层&#xff0c;搞好车间现场管理&#xff0c;有利于企业增强竞争力&#xff0c;提高产品质量和员工素质&#xff0c;保证安全生产&#xff0c;而车间班组长是生产线的主要管理者&#xff0c;是直接“当家人”&#xff0c;对生产现场状况了如指掌&#xff0c;对…

0001Java程序设计-SSM校园快递系统的设计与实现

摘 要 21世纪之后&#xff0c;全球信息化逐渐加快&#xff0c;尤其表现在近几年来电商行业的飞速发展&#xff0c;人们足不出户就可以买到自己想要的商品&#xff0c;尤其是青年大学生&#xff0c;追求新颖&#xff0c;更加乐忠于网络购物。网络购物的增加&#xff0c;就导致物…

【二】python爬虫进行AES解密遇到的问题

1、TypeError: Object type <class ‘str’> cannot be passed to C code 报错如下&#xff1a; File "C:\Python311\Lib\site-packages\Crypto\Util\_raw_api.py", line 143, in c_uint8_ptrraise TypeError("Object type %s cannot be passed to C cod…

【使用Spring Cloud Gateway构建微服务网关】—— 每天一点小知识

&#x1f4a7; 使用 S p r i n g C l o u d G a t e w a y 构建微服务网关 \color{#FF1493}{使用Spring Cloud Gateway构建微服务网关} 使用SpringCloudGateway构建微服务网关&#x1f4a7; &#x1f337; 仰望天空&#xff0c;妳我亦是行人.✨ &#x1f984; 个人主…

54 KVM工具使用指南-vmtop使用指南

文章目录 54 KVM工具使用指南-vmtop使用指南54.1 概述54.1.1 多架构支持54.1.2 显示项说明54.1.2.1 AArch64和x86_64架构公共显示项54.1.2.2 仅AArch64架构的显示项54.1.2.3 仅x86_64架构的显示项 54.2 使用方法54.2.1 语法格式54.2.2 选项说明54.2.3 快捷键 54.3 示例 54 KVM工…

MSP432学习笔记10:串口接收字符串命令并执行任务

今日终于得以继续我的MSP432电赛速通之路&#xff1a; 串口通信是单片机需要学习深入的一个很重要的板块&#xff0c;通过串口&#xff0c;我们可以实现许多数据收发与调试工作&#xff0c;可谓是非常方便快捷。 今日就跟随我的脚步&#xff0c;逐步扎实地学习如何编程MSP432…

2023-06-21:redis中什么是BigKey?该如何解决?

2023-06-21&#xff1a;redis中什么是BigKey&#xff1f;该如何解决&#xff1f; 答案2023-06-21&#xff1a; 什么是bigkey bigkey是指存储在Key-Value数据库中的键对应的值所占用的内存空间较大。举个例子&#xff0c;如果值是字符串类型&#xff0c;它可以达到最大512MB的…

堆体系结构概述

1、逻辑概述 2、堆会出现的异常 3、物理上划分 &#xff08;1&#xff09;新生区 新生区是类的诞生、成长、消亡的区域&#xff0c;一个类在这里产生&#xff0c;应用&#xff0c;最后被垃圾回收器收集&#xff0c;结束生命。新生区又分为两部分&#xff1a; 伊甸区&#xff0…

Goby 漏洞发布|WordPress User Post Gallery 插件 upg_datatable 远程代码执行漏洞(CVE-2022-4060)

漏洞名称&#xff1a;WordPress User Post Gallery 插件 upg_datatable 远程代码执行漏洞&#xff08;CVE-2022-4060&#xff09; English Name&#xff1a;WordPress plugins User Post Gallery upg_datatable RCE Vulnerability (CVE-2022-4060) CVSS core: 9.8 影响资产数…

Observability:如何把 Elastic Agent 采集的数据输入到 Logstash 并最终写入到 Elasticsearch

在之前的文章 “安装独立的 Elastic Agents 并采集数据 - Elastic Stack 8.0”&#xff0c;我们详述了如何使用 No Fleet Server 来把数据写入到 Elasticsearch 中。在今天的文章中&#xff0c;我们来详述如下使用 Elastic Agents 在独立&#xff08;standalone&#xff09;模式…

Gradio Blocks:自定义交互式Web应用和演示

❤️觉得内容不错的话&#xff0c;欢迎点赞收藏加关注&#x1f60a;&#x1f60a;&#x1f60a;&#xff0c;后续会继续输入更多优质内容❤️ &#x1f449;有问题欢迎大家加关注私戳或者评论&#xff08;包括但不限于NLP算法相关&#xff0c;linux学习相关&#xff0c;读研读博…

GitPySearch: 全局Python代码搜索工具

一 、背景 在某些情况下&#xff0c;我们需要快速了解哪些项目包含特定的配置&#xff0c;例如使用了fastjson库或数据库的连接配置。然而&#xff0c;在GitLab上逐个代码仓库进行搜索是非常耗时的。为了提高效率&#xff0c;我们开发了一个Python脚本工具&#xff0c;用于实现…

PostgreSQL的优势:为何它成为主流数据库管理系统

PostgreSQL的优势&#xff1a;为何它成为主流数据库管理系统 Stack Overflow 2023年报告PostgreSQL和MySQL同异我们在开发中如何选择PostgreSQL和MySQL呢&#xff1f; 摘要&#xff1a;本文主要比较了PostgreSQL和MySQL这两个流行的关系型数据库管理系统。我们首先介绍了它们的…

屏蔽箱的材质结构和使用事项介绍

屏蔽箱是一种用于屏蔽机电波干扰的设备&#xff0c;通常用于电磁兼容测试、天线测试、短波收发等需要屏蔽电磁辐射噪声的场合。这种箱子通常由导电或者导磁材料制成&#xff0c;内部配备高效屏蔽材料&#xff0c;能够在一定范围内有效地屏蔽电磁波辐射&#xff0c;避免电磁波干…

详细介绍mysql索引类型

目录 Normal 普通索引Unique 唯一索引Full Text 全文索引SPATIAL 空间索引btree索引和hash索引的区别在实际操作过程中&#xff0c;应该选取表中哪些字段作为索引&#xff1f; Normal 普通索引 表示普通索引&#xff0c;大多数情况下都可以使用 Unique 唯一索引 表示唯一的&…

Linux内核内存管理源码分析之init-mm.c(2)

接前一篇文章&#xff1a;Linux内核内存管理源码分析之init-mm.c&#xff08;1&#xff09; 本文内容参考&#xff1a;https://www.cnblogs.com/mysky007/p/12317831.html 上回说到了swapper_pg_dir和init_top_gpt。再次给出内核源码中init_top_gpt的说明&#xff0c;在Documen…

【基础】MQTT -- MQTT 特性:QoS、Retained 消息、LWT 以及 Keepalive

MQTT -- MQTT 特性&#xff1a;QoS、Retained 消息、LWT 以及 Keepalive QoS 及其最佳实践MQTT 协议中的 QoS 等级QoS 0QoS 1PUBACK 数据包 QoS 2PUBREC 数据包PUBREL 数据包PUBCOMP 数据包 实际的订阅者 QoSQoS 的最佳实践QoS 与会话QoS 的选择 Retained 消息LWT 遗嘱消息Keep…

FPGA_学习_12_IP核_FIFO

FIFO(Frist Input Frist Output)&#xff0c;即先入先出&#xff0c;也是一种存储器&#xff0c;一般做数据缓冲。FIFO和 RAM的共同点在于都能存储数据、都有控制写和读的信号;不同点在于 FIFO 没有地址&#xff0c;所以不能任意指定读取某一个数据&#xff0c;数据只能按照数据…

一个女孩从软件测试工程师到主管的成长

说实话&#xff0c;我做测试工作的时间不是很长&#xff0c;学完软件测试工程师的课程后&#xff0c;到现在也就是一年多的时间吧&#xff0c;不过&#xff0c;我愿意自己学习和工作中积累起的这些点滴与大家分享。 如果你想学习自动化测试&#xff0c;我这边给你推荐一套视频…