基于uniapp+vue3+vite实现小程序构建Android、iOS多端项目配置详解

🚀 作者 :“二当家-小D”

🚀 博主简介:⭐前荔枝FM架构师、阿里资深工程师||曾任职于阿里巴巴担任多个项目负责人,8年开发架构经验,精通java,擅长分布式高并发架构,自动化压力测试,微服务容器化k8s等

🚀 欢迎小伙伴们 点赞👍、收藏⭐、留言💬

🍅文末获取源码联系 配套笔记打包🍅

一、千里始足下—通过uni-app框架创建项目

简介:通过uni-app框架创建项目

  • 创建方式

    • HBuilderX可视化方式

    • vue-cli命令行方式

  • 通过HBuilderX可视化方式

    • HBuilderX工具下载

      • https://www.dcloud.io/hbuilderx.html
    • 创建uni-app项目

    • 运行uni-app项目

  • 通过vue-cli命令行方式

    • 环境安装

      # 查看是否安装有@vue/cli
      vue -V# 无则执行命令安装
      npm install -g @vue/cli
      
    • 命令行安装 Vue3/vite/typescript 项目模板

      npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
      
    • 直接访问官网提供的gitee地址下载

      • https://gitee.com/dcloud/uni-preset-vue/repository/archive/vite-ts.zip
二、uni-app项目运行和项目结构目录讲解

简介:项目运行和项目结构目录讲解

  • 运行项目

    • 使用 pnpm 包管理工具

      # 查看是否安装pnpm
      pnpm -v# 无则安装
      npm install -g pnpm
      
    • 下载依赖

      pnpm i
      
    • 运行

      pnpm dev:h5
      
  • 项目结构
    在这里插入图片描述

node_modules  ——放置项目的依赖文件src           ——放置开发的代码文件pages					——放置页面文件static				——放置静态文件App.vue   		——页面入口文件env.d.ts      ——.vue文件的类型说明文件main.ts				——程序的入口文件,加载各种公共组件manifest.json ——5+App拓展文件,打包app时要使用pages.json   	——全局配置文件,配置页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar等等uni.scss			——uniapp的默认css样式.gitignore		——git忽略文件index.html		——项目总的入口文件package.json 	——项目依赖的描述文件pnpm-lock.yaml 	——锁定项目的依赖包版本tsconfig.json 	——TS的语法识别和执行配置文件vite.config.ts	——编译工具vite的配置文件
三、 详解uni-app项目运行在安卓真机调试

简介:uni-app项目运行在安卓真机调试

  • 因为安卓模拟器调试有问题,运行项目后白屏,因此使用安卓真机调试
    在这里插入图片描述

  • 安卓真机调试

    • HBuilderX下载真机插件
      在这里插入图片描述

    • 手机通过USB链接电脑调试

      • 手机开启开发者模式,并且打开USB调试

        • 一般是在设置 ==> 关于手机 ==> 版本号连续点击5-7次开启开发者模式 ==> 找到开发者选项 ==> 打开USB调试

        在这里插入图片描述
        在这里插入图片描述

        • 允许USB调试计算机进行调试
          在这里插入图片描述
    • HbuilderX选中要运行的项目
      在这里插入图片描述
      在这里插入图片描述

      • 如果刷新还是没监测到设备,则是手机USB没连接上电脑,重复上面的操作
四、 详解uni-app项目运行在ios模拟器调试

简介:详解uni-app项目运行在ios模拟器调试

  • 下载Xcode开发工具
    在这里插入图片描述

  • 运行Xcode

  • Hbuilder运行到ios模拟器

    在这里插入图片描述

五、 详解uni-app项目运行在微信小程序调试

简介:详解uni-app项目运行在微信小程序调试

  • 下载微信小程序工具

    • https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
  • 项目运行在微信小程序

    • 打开HbuilderX,运行 ==> 运行到小程序或模拟器 ==> 运行设置 ==> 设置微信开发者工具路径

      在这里插入图片描述

    • 打开微信开发者工具,选择设置 ==> 安全设置。将服务端口号选择为开启

      在这里插入图片描述

    • 运行
      在这里插入图片描述

结束语

今天内容讲述了UniApp 结合 Vue 3 和 Vite 的多端项目创建与配置过程中,我们深入了解了项目结构、Vite 的配置、Vue 3 的支持以及多端适配等关键步骤。通过各种配置,如何确保了项目在各个平台下的正常运行和优越性能。

资料获取📚
完整代码和笔记已经准备好,如果有问题,可以在评论区留言讨论💬
原创不易,别忘了点赞👍+收藏⭐哦!
点击下方链接即可获取完整资料压缩包🎁,快来领取吧!↓↓↓↓

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

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

相关文章

网络驱动--汽车ETNB(瑞萨)

以太网AVB (ETNB) 介绍RH850/U2A-EVA的属性,如编号 单元、寄存器的基址。描述了函数和寄存器 ETNB的成员。 两个单元;Units ▪ Fast Ethernet ETNB0 ▪ Gigabit Ethernet ETNB1 单元通道特点 For ETNB0 (Fast Ethernet) ▪ Communication interface ▪…

基于 llama2 的提示词工程案例2

优化大型语言模型(LLMs) 优化大型语言模型(LLMs)中的提示词(prompts)是提高模型性能和输出相关性的重要手段。以下是一些优化提示词的方向: 明确性:确保提示词清晰明确,…

Rust 实战thiserror+自定义错误消息体

导航 一、背景二、实践1、导入thiserror2、自定义错误消息体(1)创建ErrMsg.rs和创建自定义结构体(2)lib.rs添加ErrMsg(3)main函数(4)完整代码 一、背景 开发中遇到需要通用、能够满…

LeetCode 142.环形链表Ⅱ

题目描述 给定一个链表的头节点 head ,返回链表开始入环的第一个节点。 如果链表无环,则返回 null。 如果链表中有某个节点,可以通过连续跟踪 next 指针再次到达,则链表中存在环。 为了表示给定链表中的环,评测系统内…

速卖通自养号测评技术策略与实战指南

速卖通自养号测评是一个涉及多个步骤和细节的过程,以下是一些关键步骤和注意事项: 1. 准备资源和环境: 测评养号系统:确保账号的权重稳定运营与账号便捷的管理。 海外纯净IP资源:为账号提供稳定的网络环境&#x…

AI新突破:多标签预测技术助力语言模型提速3倍

DeepVisionary 每日深度学习前沿科技推送&顶会论文分享,与你一起了解前沿深度学习信息! 引言:多标签预测的新视角 在人工智能领域,尤其是在自然语言处理(NLP)中,预测模型的训练方法一直在…

地下管线管网三维参数化建模软件MagicPipe3D V3.5

经纬管网建模系统MagicPipe3D(www.magic3d.net)自主安全可控,本地离线参数化构建三维管网模型(管道、接头、附属物等),输出标准3DTiles、Obj等格式,支持Cesium、Unreal、Unity等引擎可视化查询分…

【TypeScript类简介以及使用方法】

TypeScript 引入了类的概念,允许使用面向对象的编程范式。类是对象的模板或蓝图,它定义了一组属性和方法,这些属性和方法被对象所共享。在 TypeScript 中,类提供了更结构化、可维护且可重用的代码方式。 TypeScript 类简介 属性:类中的变量称为属性(也称为字段或成员变量…

【mysql】深入探索mysql中的各种约束条件

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,…

Java | Spring框架 | Bean的装配之XML配置

Spring | Bean的装配 之XML配置 在Spring框架中,Bean的装配是指将Bean定义和配置信息加载到Spring容器中,以便容器能够管理这些Bean。 Spring支持多种装配方式,其中XML配置是传统但依然有效的方式。 一、 使用XML配置文件定义Bean XML配置…

16、Python:函数定义

Python中的函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段。它们能提高代码的模块性,和代码复用率。你可以将功能性代码块定义为函数,并在需要时调用它们。 函数定义 在Python中,def关键…

知识图谱和大语言模型的共存之道

导读 知识图谱和大型语言模型都是用来表示和处理知识的手段。大模型补足了理解语言的能力,知识图谱则丰富了表示知识的方式,两者的深度结合必将为人工智能提供更为全面、可靠、可控的知识处理方法。在这一背景下,OpenKG组织新KG视点系列文章—…

构建第一个ArkTS应用之@管理应用拥有的状态概述

上一个章节中介绍的装饰器仅能在页面内,即一个组件树上共享状态变量。如果开发者要实现应用级的,或者多个页面的状态数据共享,就需要用到应用级别的状态管理的概念。ArkTS根据不同特性,提供了多种应用状态管理的能力: …

还有谁……想知道“线下与线上布局之间的本质区别”

还有谁……想知道 线下与线上布局之间的本质区别 hello,亲爱的你们好.… 我是你们的好朋友,正博,今天是非常特殊的一天,给每一位读者准备了一份特殊的神秘礼物…… 在分享【特殊礼物】之前,请允许我分享一下《线下营销与线上销售的9大核心差异》…… 1、注意力; 2、销…

浪漫编码:手把手教你实现校园表白墙功能

💓 博客主页:从零开始的-CodeNinja之路 ⏩ 收录文章:浪漫编码:手把手教你实现校园表白墙功能 🎉欢迎大家点赞👍评论📝收藏⭐文章 这里写目录标题 表白墙数据准备引入MyBatis和MySQL驱动依赖…

音视频开发2 音频基础

基本概念 三巨头:采样率、采样格式,声道数与声道布局、 PCM、音质、音频编码格式、音频封装格式 采样率: 每秒采集的样本数量 我们知道声音是连续的一段波, 模拟信号的波形是无限光滑的,可以看成由无数个点组成&am…

华为OD机试【路灯照明问题】(java)(100分)

1、题目描述 在一条笔直的公路上安装了N个路灯,从位置0开始安装,路灯之间间距固定为100米。 每个路灯都有自己的照明半径,请计算第一个路灯和最后一个路灯之间,无法照明的区间的长度和。 2、输入描述 第一行为一个数N&#xff…

中霖教育:哪些地区的一级造价师考试不查社保?

关于一级造价师考试是否查社保的问题,不同地区的规定不一样,部分地区要求社保缴纳时间为1年,部分地区要求6个月,具体还要以资格审核为准。 不用查社保的省份: 江苏、浙江、广东、海南、吉林、黑龙江、内蒙古、山西、…

生信软件16 - 常规探针设计软件mrbait

1. mrbait安装 mrbait支持linux和macOS系统,测试安装Python版本 3.6.15。 # conda安装 conda install mrbait -c tylerkchafin -c bioconda -c conda-forge# github安装 git clone https://github.com/tkchafin/mrbait.git cd mrbait python ./setup.py install# …