Vue からの移行

このページでは、Monaca CLIを使用して、 プロジェクトを Monaca に移行するための手順を説明します。このガイドを終えたら、Monaca を使って プロジェクトからアプリを実行、テスト、デバッグ、ビルドすることができます！始めましょう！

前提条件

1. 移行を開始する前に、キーポイントを一読してみてください。

2. Monaca CLI を npm でグローバルにインストールする

   $ npm install -g monaca

移行手順

1. Monaca CLIのインストール後、Monacaアカウントでログインしてください。

$ monaca login

2. プロジェクトディレクトリに移動します。

$ cd <project dir>

3. 次に、プロジェクトをMonacaのプロジェクト構造に変換するために monaca init を実行します。

$ monaca init
$ ...
$ ? Are you sure you want to continue initializing this project? Yes
$ ? Is it a transpilable project? Yes
$ ? Which command do you use to serve the app? vue-cli-service serve
$ ? Which command do you use to build the app? vue-cli-service build --dest www --no-clean
$ ? Which command do you use to watch the changes from your app? vue-cli-service build --dest www --no-clean --watch

次のように package.json ファイルに3つの新しいコマンドを注入する必要があります：

"scripts": {
    "monaca:preview": "vue-cli-service serve & vue-cli-service build --dest www --no-clean --watch",
    "monaca:transpile": "vue-cli-service build --dest www --no-clean",
    "monaca:debug": "vue-cli-service build --dest www --no-clean --watch"
}

4. Config ビルド出力ディレクトリ

vue.config.js を作成し、 file：// プロトコルで index.html を提供できるように次のコンテンツを追加します。

module.exports = {
    baseUrl: './'
}

アプリをデバッグする

Monaca デバッガー は、端末上で Monaca アプリをリアルタイムでテスト、デバッグするためのアプリケーションです。 Monaca クラウド IDE で アプリを開発する場合、ファイルに加えられた変更は、保存後すぐに Monaca デバッガーに同期されます。

Monaca デバッガーの使い方は、以下になります。

1. Google Play または App Store から端末に Monaca デバッガーをインストールします。

Android エミュレータに Monaca デバッガーをインストールする場合は、 Android エミュレーター向け Monaca デバッガー を参照してください。

1. Monaca デバッガーを起動し、Monaca アカウントでサインインします。 Monaca クラウド IDE と同じアカウントを使用していることを確認してください。

1. デバッグを開始する前に、Monaca DebuggerとローカルPCをペアリングする必要があります。ペアリング前に次の点に注意してください。

• Monaca DebuggerとローカルPCは、同じネットワーク接続（LANまたはWi-Fi）に接続する必要があります。

• ローカルPCのファイアウォールを無効にする。

  1. 上の点を確認後、ペアリングを開始できます。ターミナルでプロジェクトディレクトリに移動し、 monaca debugと入力します。

    $ cd <project dir>
    $ monaca debug

1. 次に、デバッガとローカルPCをペアリングするよう促すポップアップメッセージがMonaca Debuggerの中に表示されます。

1. ペアリングが成功した場合、ローカルプロジェクト名がMonaca Debuggerの Local Projectsに表示されます。 ペアリングに失敗した場合は、Fail to Pair Monaca Debuggerを参照してください。

1. プロジェクトを実行するには、Monaca Debuggerのプロジェクト名をタップします.

2. プロジェクトがデバッガで実行されているはずです。プロジェクトのさまざまな操作を試してみてください！ その後、コードを変更して保存してみてください。次に、デバッガに反映された変更が表示されます。

デバッグを停止し、デバッガのペアを解除するには、 Ctrl + c を押します。

アプリをビルドする

CLI コマンドのみを使用

1. プロジェクトディレクトリに移動します。

      $ cd <project dir>

2. Android Debug Buildを開始する

      $ monaca remote build android --build-type=debug

GUI での使用

1. プロジェクトディレクトリに移動します。

      $ cd <project dir>

2. ビルドウィンドウを開いてビルドを開始します。

      $ monaca remote build --browser

3. デバッグビルドはデフォルトで選択されています。Start Buildをクリックしてください。

1. ビルドが完了するまでに数分かかることがあります。ビルドが正常に完了すると、次の画面が表示されます。アプリをデバイスにインストールするさまざまな方法を選択できます。