0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

PhoneGap + Vue + TypeScript で開発環境を構築してみた

Posted at

PhoneGap とは?

ネイティブアプリを JavaScript だけで実装できる Apache Cordova をラップしたプラットフォームです。
ビルドされたアプリはネイティブアプリの WebView 上で実行されますが、プラグインを通してネイティブ機能とやりとりができます。

PhoneGap と Cordova の違いはあまり詳しくないので触れませんが、PhoneGap は Cordova + α みたいな感覚で問題ないと思います。開発用の便利ツールやビルド環境、テスト環境などのエコシステムがついてきます。

Cordova のいいところは、開発時にはブラウザでほぼすべての挙動が確認できることです。
JavaScript の膨大なエコシステムの恩恵を受けられるため、例えば jest を使ったテスト、dayjs, axios といったライブラリや Web Font, Icon Font、CSS によるスタイリングなど Web で培った技術がそのまま使えます。

手順概要

  1. Vue の新規プロジェクトを作成 (vueコマンドで普通に作成)。
  2. PhoneGap の新規プロジェクトを作成 (phonegap コマンドで普通に作成)。
  3. Vue プロジェクトと PhoneGap プロジェクトをマージ。
  4. Vue の設定を PhoneGap 用に修正。
  5. ブラウザとエミュレータでの動作確認。
  6. vue-cordova の導入と plugins のテスト。

手順詳細

Github にボイラープレートリポジトリを作成したのでそちらを参照してください。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?