- はじめに
- 前提条件
- vueプロジェクトの作成
- semanti ui vueを導入
- cordovaプラグインの追加
- ビルド先の変更
- cordova.jsの読み込み
- ビルド実行
- 実機デバッグ
- 実行結果
- まとめ・・・
はじめに
以前の記事（こちらとこちら）でcordovaプロジェクトにVueプロジェクトを作成する形で開発環境を構築しましたが、
開発を進めるうちに画像が表示されなかったり、
初期表示時にvue routerの<router-view/>にレンダリング されなかったりしました。
で、調べると・・・Vueプロジェクトを作成し、そこにcordovaプラグインを追加する方法があることが分かりました。
今回は、Vueプロジェクトを作って、cordovaプラグインを追加して、
ハイブリッドアプリを構築する手順をまとめておきます。
前提条件
vueとcordovaがnpmインストールされていること
npmインストールされているリストの確認
npmインストールされているはnpm lsコマンドで確認できます。
>npm ls -g --depth=0 +-- @vue/cli@4.3.1 `-- cordova@9.0.0
※-gを付与することでグローバルにインストールされているものを確認できます。
※--depth=0を付与することで、1階層のみのリストを表示できます。(付与しないと関連するものすべて表示されちゃいます)
vueプロジェクトの作成
vueプロジェクトをvue createコマンドで作成します。
vue create vuecordova
※プロジェクト名をvuecordovaにしています。
※細かい手順は、こちらの記事に記載してます。
※プロジェクトには、Babel/TypeScript/Routerを追加しました。
semanti ui vueを導入
細かい手順は、こちらの記事に記載してます。
cordovaプラグインの追加
- vue addでcordovaを追加する
vue add cordova
- まだコミットされていないけどよいか聞いてくる
- Yを選択
WARN There are uncommited changes in the current repository, it's recommended to commit or stash them first. ? Still proceed? (y/N)
- cordovaフォルダ名は何にするか聞いてくる
- デフォルトのsrc-cordovaでよいのでそのままエンター
? Name of folder where cordova should be installed (src-cordova)
- アプリのIDは何にするか聞いてくる
- com.vuecordova.appとしました
? ID of the app (com.vue.example.app)
- アプリ名を聞いてくる
- VueCordovaAppとしました
? Name of the app (VueExampleAppName)
- プラットフォームを聞いてくる
- 今回はAndroidのみを選択しました
? Select Platforms: >(*) Android ( ) iOS ( ) Browser ( ) OSX ( ) Electron
ビルド先の変更
プロジェクトフォルダ直下のpackage.jsonに「--dest src-cordova/www 」を追加し、
npm run buildで「src-cordova/www」にビルド結果が出力されるようにします。
"scripts": {
"build": "vue-cli-service build --dest src-cordova/www ",
cordova.jsの読み込み
public/index.htmlにcordova.jsの読み込みを追加する。
<body>
<script src="cordova.js"></script>
<div id="app"></div>
</body>
ビルド実行
npm run build
実機デバッグ
cd src-cordova cordova run android --device
実行結果
おぉぉ、画像も表示されてますし、<router-view>の部分もレンダリングされています。
まとめ・・・
vue+cordovaでのハイブリッドアプリの構築としては、
こっちの方法で環境構築する方が正しいような気がします。
参考させてもらったサイト - https://qiita.com/reon777/items/82f6292248d76d1f3360
