Vue3가 모바일 단말기(Android, ios)를 개발하는 방법

Vue3에는 모바일 단말기 개발을 위한 사용하기 쉬운 도구가 있습니까?

1. uniapp 个人uniapp은 작은 프로그램 등의 개발에 적합하다고 생각되며, 이것으로 네이티브 어플리케이션을 개발하는데 약간의 문제가 있을 것입니다.

  • 성능 제한 : Uniapp은 중간 계층을 통해 크로스 플랫폼을 구현하기 때문에 응용 프로그램이 기본 기능에 액세스할 때 성능 손실이 발생할 수 있습니다. 기본 개발과 비교할 때 Uniapp은 대규모 데이터, 복잡한 애니메이션 및 고성능 요구 사항을 다루는 애플리케이션 시나리오에서 제대로 작동하지 않을 수 있습니다.

  • 플랫폼 제한 : 플랫폼마다 고유한 디자인 사양 및 특성이 있으며 유니앱은 크로스 플랫폼 시 일부 플랫폼 제한이 적용될 수 있습니다. 일부 플랫폼별 기능이나 인터페이스 디자인은 완전히 구현되지 않을 수 있으며 특정 플랫폼의 기본 개발 방법을 사용하여 해결해야 합니다.

  • 생태계 성숙도: 기본 개발과 비교할 때 Uniapp의 생태계는 상대적으로 지원 및 리소스가 제한적인 비교적 새롭습니다. 문제가 발생하면 완벽한 솔루션을 찾기 어려울 수 있으며 개발자는 문제를 해결하기 위해 더 많은 시간과 에너지를 소비해야 할 수 있습니다.

  • 사용자 경험의 차이: 다양한 플랫폼의 다양한 디자인 사양과 사용자 습관으로 인해 Uniapp을 사용하여 개발된 애플리케이션의 사용자 경험은 플랫폼마다 다를 수 있습니다. 개발자는 더 나은 사용자 경험을 제공하기 위해 각 플랫폼에 대해 특정 적응 및 조정을 수행해야 합니다.

  • 기능 지원 제한: Uniapp은 크로스 플랫폼 구성 요소 및 API를 최대한 제공하지만 일부 플랫폼 별 기능 및 인터페이스는 완전히 지원되지 않을 수 있습니다. 특정 플랫폼 기능이 필요한 경우 기본 개발 또는 사용자 지정 플러그인이 필요할 수 있습니다.

  • 유니 문서 uniapp.dcloud.net.cn/

2. React는 기본 애플리케이션을 개발하기 위해 기본적으로 반응합니다 Vue无法使用 www.reactnative.cn/

3. Cordova cordova.apache.org/ 는 ios android exe dmg로 패키징된 네이티브 html js css를 지원합니다.

4. ionic 이 프레임워크가 Android iOS 데스크탑 프로그램을 빌드하기 위해 Vue3 각도 반응 ts를 지원한다는 것을 알았습니다. 이것은 제가 원하는 것이 아닙니다. ionicframework.com/docs

5. weex vue2는 유지보수 없이 네이티브 어플리케이션을 개발하는 것 같습니다.마지막 유지보수 시기는 2019년 weexapp.com/zh/guide/in…

6. Flutter 저는 docs.flutter.dev/get-started 도 좋아합니다...

전제조건

1. 자바 환경 및 안드로이드 에디터 SDK 설치

설치 완료 후 환경변수 확인

이미지.png

이미지.png

이미지.png

Android Editor의 sdk를 확인하고 설치되어 있지 않은 경우 설치하십시오.

이미지.png

이미지.png

이미지.png

이온성

npm install -g @ionic/cli

Vue3프로젝트 초기화

설치가 완료되면 이온 명령이 나타납니다.

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

이미지.png

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

이미지.png

시작이 완료되면 탭 데모와 함께 제공됩니다.

이미지.png

Android 편집기 디버그로 실행

npm run build
ionic capacitor copy android

체크에 주의

이미지.png

해당 파일이 없으면 android 디렉토리를 삭제하고 다음 명령을 다시 실행하십시오.

ionic capacitor copy android

시사

ionic capacitor open android

그는 Android 편집기를 여는 데 도움을 줄 것입니다.

sdk가 없다는 오류가 보고되면 sdk 디렉토리를 확인하십시오.

이미지.png.

컴파일 대기 중

이미지.png

실행하려면 위의 녹색 화살표를 클릭하십시오.

이미지.png

핫 업데이트

미리보기 앱을 핫 업데이트하려면 Android 기기가 필요합니다.

개발자 모드를 활성화하려면 버전 번호를 계속 클릭하십시오.

bd36c9f72990ae5cf2275e7690c7f354.jpg

USB 디버깅을 켜서 컴퓨터에 연결

8f1085f12207c5107d39dd8d193dadfb.jpg

ionic capacitor run android -l --external

지금 바로 Android 기기를 선택하세요.

이미지.png

성공적인 핫 업데이트

이미지.png

20c29c088e7f4f152fe1af0adbc4035f.jpg

Supongo que te gusta

Origin juejin.im/post/7251113487317106745
Recomendado
Clasificación