首页 > 其他分享 >Vue3 如何开发移动端(安卓,ios)

Vue3 如何开发移动端(安卓,ios)

时间:2023-07-29 20:32:17浏览次数:62  
标签:原生 Uniapp 安卓 平台 ios Vue3 android ionic

Vue3 有没有一款好用的开发移动端的工具

1.uniapp 我个人认为uniapp 适合开发小程序之类的,用这个去开发原生应用会存在一些问题

  • 性能限制:由于 Uniapp 是通过中间层实现跨平台,应用在访问底层功能时可能存在性能损失。与原生开发相比,Uniapp 在处理大规模数据、复杂动画和高性能要求的应用场景下可能表现较差。
  • 平台限制:不同平台有着各自的设计规范和特性,Uniapp 在跨平台时可能受到一些平台限制。有些平台特有的功能或界面设计可能无法完全实现,需要使用特定平台的原生开发方式来解决。
  • 生态系统成熟度: 相比于原生开发,Uniapp 的生态系统相对较新,支持和资源相对有限。在遇到问题时,可能难以找到完善的解决方案,开发者可能需要花费更多的时间和精力来解决问题。
  • 用户体验差异: 由于不同平台的设计规范和用户习惯不同,使用 Uniapp 开发的应用在不同平台上的用户体验可能存在差异。开发者需要针对每个平台进行特定的适配和调优,以提供更好的用户体验。
  • 功能支持限制: Uniapp 尽可能提供了跨平台的组件和 API,但某些特定平台的功能和接口可能无法完全支持。在需要使用特定平台功能的情况下,可能需要使用原生开发或自定义插件来解决。
  • uni 文档 uniapp.dcloud.net.cn/

2.react 拥有react native 开发原生应用 Vue无法使用 www.reactnative.cn/

3.Cordova cordova.apache.org/ 支持原生html js css 打包成 ios android exe dmg

4.ionic 我发现这个框架支持Vue3 angular react ts 构建Android iOS 桌面程序 这不正合我意 ionicframework.com/docs

5.weex vue2开发原生应用 貌似不维护了最后维护时间2019年weexapp.com/zh/guide/in…

6.flutter 这个我也喜欢 docs.flutter.dev/get-started…

前置条件

1.安装 java 环境 和 安卓编辑器sdk

安装完成检查环境变量

Vue3 如何开发移动端(安卓,ios)_android

Vue3 如何开发移动端(安卓,ios)_java_02

Vue3 如何开发移动端(安卓,ios)_ci_03

检查安卓编辑器的sdk 如果没安装就装一下

Vue3 如何开发移动端(安卓,ios)_java_04

Vue3 如何开发移动端(安卓,ios)_android_05

Vue3 如何开发移动端(安卓,ios)_前端_06

ionic

npm install -g @ionic/cli

初始化Vue3项目

安装完成后会有ionic 命令

ionic start [name] [template] [options]
#            名称      模板    类型为vue项目
ionic start app tabs --type vue

Vue3 如何开发移动端(安卓,ios)_android_07

npm install #安装依赖
npm run dev 启动测试

Vue3 如何开发移动端(安卓,ios)_ci_08

启动完成后自带一个tabs demo

Vue3 如何开发移动端(安卓,ios)_android_09

运行至android 编辑器 调试

npm run build
ionic capacitor copy android

注意检查

Vue3 如何开发移动端(安卓,ios)_java_10

如果没有这个文件 删除android目录 重新执行下面命令

ionic capacitor copy android

预览

ionic capacitor open android

他会帮你打开安卓编辑器

如果报错说丢失sdk 注意检查sdk目录

Vue3 如何开发移动端(安卓,ios)_android_11

.

等待编译

Vue3 如何开发移动端(安卓,ios)_ci_12

点击上面绿色箭头运行

Vue3 如何开发移动端(安卓,ios)_前端_13

热更新

如果要热更新预览App 需要一个安卓设备

一直点击你的版本号就可以开启开发者模式

Vue3 如何开发移动端(安卓,ios)_android_14

开启usb调试 连接电脑

Vue3 如何开发移动端(安卓,ios)_前端_15

ionic capacitor run android -l --external

选择刚才的安卓设备

Vue3 如何开发移动端(安卓,ios)_ci_16

成功热更新

Vue3 如何开发移动端(安卓,ios)_ci_17

Vue3 如何开发移动端(安卓,ios)_前端_18

标签:原生,Uniapp,安卓,平台,ios,Vue3,android,ionic
From: https://blog.51cto.com/u_13463935/6895156

相关文章

  • 基于安卓的校园外卖点餐系统
    本文主要概述了如何开发一个基于Android的校园外卖系统,使用者可以通过手机下载校园外卖系统,可以通过手机下单系统进行点餐,用户的功能有:点菜、我的订单、地址管理等功能,管理员功能有:菜品管理、类别管理、订单管理、餐厅管理、留言评论管理和用户管理。基于Android的校园外卖系统......
  • 私藏项目实操分享Android开发:获取安卓App版本号的方法步骤
    前言在Android开发过程中,想要开发一个完整功能的App,各个地方的内容都要涉及到,比如获取App的系统版本号就是必须要有的功能。Android的App版本号相关内容比iOS的App版本号内容要多,而且iOS版的App版本信息跟Android的还不一样。本篇文章就来介绍一下Android开发中获取App版本号的方法......
  • rdma-core之riostream.c
    头文件和库以及全局变量#include<stdio.h>#include<stdlib.h>#include<string.h>#include<strings.h>#include<errno.h>#include<getopt.h>#include<sys/types.h>#include<sys/socket.h>#include<sys/time.h>#i......
  • Vue3 里 script 的三种写法
    一、Vue3里 script 的三种写法首先,Vue3新增了一个叫做组合式api的东西,英文名叫CompositionAPI。因此Vue3的script现在支持三种写法,1、最基本的Vue2写法html复制代码<template><div>{{count}}</div><button@click="onClick">增加1</but......
  • vue3 TS vite element ali-oss使用方式
    vue3TSviteelementali-oss使用方式安装ali-oss包npmiali-oss-S使用oss封装函数constOSS=require('ali-oss')//importOssfrom'ali-oss'/***[accessKeyId]{String}:通过阿里云控制台创建的AccessKey。*[accessKeySecret]{String}:通过阿里云控制......
  • VMware ESXi 8.0U1c macOS Unlocker & OEM BIOS (标准版和厂商定制版)
    VMwareESXi8.0U1cmacOSUnlocker&OEMBIOS(标准版和厂商定制版)ESXi8.0U1c标准版,DellHPE联想浪潮定制版请访问原文链接:https://sysin.org/blog/vmware-esxi-8-u1-oem/,查看最新版。原创作品,转载请保留出处。作者主页:sysin.org2023-07-27,VMwarevSphere8.0U1c......
  • VMware ESXi 8.0U1c Unlocker & OEM BIOS 集成网卡驱动和 NVMe 驱动 (集成驱动版)
    VMwareESXi8.0U1cUnlocker&OEMBIOS集成网卡驱动和NVMe驱动(集成驱动版)发布ESXi8.0U1c集成驱动版,在个人电脑上运行企业级工作负载请访问原文链接:https://sysin.org/blog/vmware-esxi-8-u1-sysin/,查看最新版。原创作品,转载请保留出处。作者主页:sysin.org2023-07-......
  • vue3单页面的写法
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="https://unpkg.com/vue@3/dist/vue.global.js"></script></head>......
  • Vue3下的axios跨域问题
    0、vue-cli版本vue-Vvue--version   1、根目录找vue.config.js,无则添加文件;然后添加节点: const{defineConfig}=require('@vue/cli-service')module.exports=defineConfig({transpileDependencies:true,lintOnSave:false,//关闭语法检查de......
  • Vue3之ref取render形式组件jsx元素节点
    [2023年7月28日22:16:06]ref取render方式组件节点一开始注意到组件setup和render一起使用的情况,好奇怎么通过ref取到render中jsx里的节点,一开始试了以下的尝试,结果是undefined的:import{defineComponent,ref,onMounted}from"vue";exportdefault......