Vuejs + Cordova 개발을 vue-cli를 사용하여 몇 가지 명령으로 시도 할 수있는 플러그인을 작성했습니다.

Vue-CLI3.0과 호환되는 Cordova 용 플러그인을 만들었습니다. 아직 베타이지만 최소한 움직입니다.

htps : // 기주 b. 코 m / 가마 마소 온 / ゔ えぃ - ぃ ぅ 긴 - r ゔ

사용법

사전에 Vue-CLI3.0 설치 및 Cordova 개발 환경 준비이 필요합니다

$ vue create my-project     # Vue-CLI3.0でプロジェクトを作成します。TSにも対応しています。
$ cd my-project
$ vue add cordova           # 本プラグインをmy-projectに追加します
$ npm run cordova-serve     # cordovaに適した形でwebpack-dev-serverを起動します

# 別のタブで 
$ cordova platform add ios  # my-projectの対応プラットフォームにiOSを追加します
$ cordova run ios           # my-projectをiOS上で実行します。YATTA!

그 외 플랫폼에 대해서 등, 좀 더 자세한 내용을 시작 가이드 에 썼습니다. 여기도 함께 봐주세요.

시뮬레이터·실기에서의 Hot Reload 대응

npm run cordova-serve 그렇다면 cordova run ios 그렇다면 그냥 HotReload해야합니다. 매우 편리합니다
실제 기기로 잘 동작하지 않는 경우는, PC와 테스트용 단말이 같은 LAN에 접속하고 있는 것과, 테스트 단말->PC의 액세스를 막는 방화벽등이 없는 것을 확인해 주세요.

구조로는 다음과 같습니다.

plugin의 초기화 처리로, public/cordova 로부터 platforms 에의 심볼릭 링크를 작성해 둔다. 이렇게 하면 webpack-dev-server에서 platforms 다음 파일에 액세스할 수 있습니다.

npm run cordova-serve 때때로 www/index.html 를 리디렉션용 html로 바꿉니다.

iOS/Android상에서 어플리케이션이 실행되면(자), 우선 (2)의 리다이렉트용의 index.html가 읽힌다. 이 리디렉션용 index.html에서 webpack-dev-server가 기동하고 있는 IP에 리디렉션시킨다.

리디렉션했을 뿐이라면, cordova.js나 각 plugin용의 js가 읽히지 않기 때문에, (1)에서 준비한 심볼릭 링크를 사용해, 동적으로 적절한 cordova.js를 읽어들일 수 있다.

이 방법은 간단하지만 단점도 있습니다.
가장 큰 것은 webpack-dev-server가 기동하고 있는 IP에의 리디렉션을 허가로 하기 위해서, allow-navigation을 율유로 해 두지 않으면 안 되는 점입니다. TODO도 붙어 있지만 , 주의해 주십시오.

마지막으로

"지금 더 Cordova는 괜찮아. ReactNative나 Weex이구나."라는 목소리가 어디서나 들려오는 것도 생각합니다만, web, iOS, Android 모두에 원 소스로 대응할 수 있어 네이티브 통지 등도 실장할 수 있다 Cordova는 자원이 적은 개인 개발자에게 여전히 사용할 수 있는 기술이라고 생각합니다.

대본의 VueCli3.0 자체가 아직 beta이거나, 본 플러그인에도 구현되지 않은 TODO가 있지만 , Vuejs+Cordova에 관심이 있는 분은 꼭 한번 사용해 보세요.
움직이지 마세요.