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

avatar
作者
猴君
阅读量:1

🚀 作者 :“二当家-小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 的支持以及多端适配等关键步骤。通过各种配置,如何确保了项目在各个平台下的正常运行和优越性能。

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

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!