No Pain, No Gain

プログラミングで日常をちょっとだけ楽にしよう。

Vue.jsとCordovaを統合してハイブリッドアプリを作る

最初にCordovaプロジェクトを作る。

cordova create <アプリ名> com.example.app

それからVue.jsプロジェクトを作る。

vue init pwa <アプリ名>

ここでの<アプリ名>は先ほどcordovaディレクトリを作成する時に使ったものと同じものを利用する。 ディレクトリ名が同じなので既にフォルダーがあるってvuecliに怒られるけど、Yes を選択するとCordovaフォルダのなかにVueが統合された感じで作られる。

あとは、vuecliによって自動で作成された設定ファイルを編集し、ビルド先をwwwに変更すればいい。

index: path.resolve(__dirname, '../www/index.html'), // 変更
assetsRoot: path.resolve(__dirname, '../www'), // 変更
assetsSubDirectory: 'static', // 変更
assetsPublicPath: './'

注)ファイル名先頭の@はvue.jsプロジェクトのルートフォルダの意味。

これで普通にVueをビルドして実機で実行すればいい。スマホをケーブルでPCに接続し、以下のコマンドを実行する。

yarn build
cordova run android

Vue.jsとFirebase で新刊コミックスをサクサクとチェックできて購入管理もできるウェブサービスを作ってみた。

Vue.jsで新刊コミックスをサクサクとチェックできるサイトを作ったので宣伝させてください。

↓下記リンクにアクセスすれば、そのまま使い始めることが出来ます。

明日の新刊

↓作ったもの

f:id:hayeta:20180921153114g:plain

以下宣伝です。

続きを読む