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 デバッガーをインストールします。

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

アプリをビルドする

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