Monaca Docs
検索…
Vue からの移行
このページでは、Monaca CLIを使用して、 プロジェクトを Monaca に移行するための手順を説明します。このガイドを終えたら、Monaca を使って プロジェクトからアプリを実行、テスト、デバッグ、ビルドすることができます！始めましょう！
前提条件
- 1.
- 2.Monaca CLI を npm でグローバルにインストールする1$ npm install -g monacaCopied!
移行手順
- 1.Monaca CLIのインストール後、Monacaアカウントでログインしてください。
1
$ monaca login
Copied!
2. プロジェクトディレクトリに移動します。
1
$ cd <project dir>
Copied!
3. 次に、プロジェクトをMonacaのプロジェクト構造に変換するために monaca init を実行します。
1
$ monaca init
2
$ ...
3
$ ? Are you sure you want to continue initializing this project? Yes
4
$ ? Is it a transpilable project? Yes
5
$ ? Which command do you use to serve the app? vue-cli-service serve
6
$ ? Which command do you use to build the app? vue-cli-service build --dest www --no-clean
7
$ ? Which command do you use to watch the changes from your app? vue-cli-service build --dest www --no-clean --watch
Copied!
次のように package.json ファイルに3つの新しいコマンドを注入する必要があります：
1
"scripts": {
2
"monaca:preview": "vue-cli-service serve & vue-cli-service build --dest www --no-clean --watch",
3
"monaca:transpile": "vue-cli-service build --dest www --no-clean",
4
"monaca:debug": "vue-cli-service build --dest www --no-clean --watch"
5
}
Copied!
4. Config ビルド出力ディレクトリ
vue.config.js を作成し、 file：// プロトコルで index.html を提供できるように次のコンテンツを追加します。
1
module.exports = {
2
baseUrl: './'
3
}
Copied!
アプリをデバッグする
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と入力します。
1
$ cd <project dir>
2
$ monaca debug
Copied!
- 1.次に、デバッガとローカルPCをペアリングするよう促すポップアップメッセージがMonaca Debuggerの中に表示されます。
- 1.ペアリングが成功した場合、ローカルプロジェクト名がMonaca Debuggerの
Local Projectsに表示されます。 ペアリングに失敗した場合は、Fail to Pair Monaca Debuggerを参照してください。
- 1.プロジェクトを実行するには、Monaca Debuggerのプロジェクト名をタップします.
- 2.プロジェクトがデバッガで実行されているはずです。プロジェクトのさまざまな操作を試してみてください！ その後、コードを変更して保存してみてください。次に、デバッガに反映された変更が表示されます。
デバッグを停止し、デバッガのペアを解除するには、
Ctrl + c を押します。アプリをビルドする
CLI コマンドのみを使用
- 1.プロジェクトディレクトリに移動します。1$ cd <project dir>Copied!
- 2.Android Debug Buildを開始する1$ monaca remote build android --build-type=debugCopied!
GUI での使用
- 1.プロジェクトディレクトリに移動します。1$ cd <project dir>Copied!
- 2.ビルドウィンドウを開いてビルドを開始します。1$ monaca remote build --browserCopied!
- 3.デバッグビルドはデフォルトで選択されています。
Start Buildをクリックしてください。
- 1.ビルドが完了するまでに数分かかることがあります。ビルドが正常に完了すると、次の画面が表示されます。アプリをデバイスにインストールするさまざまな方法を選択できます。
参考ページ
最終更新 5mo ago