ドキュメントTOP » Monaca ガイド » Monaca CLI » テンプレート » Vue 2 & Onsen UI 2 テンプレート入門

Vue 2 & Onsen UI 2 テンプレート入門

新しい Vue with Onsen UI template テンプレートは、Monaca CLI に統合され、モバイルの開発にアプローチするのに最適な方法です。

Onue UI テンプレートを使用して Vue を Monaca CLI にインポートする方法を解説します。

ステップ 1 : Vue CLI のインストール

コマンドプロンプト ( Windows の場合 ) またはターミナル ( Mac の場合 ) を開き、次のコマンドを実行します。

npm install -g vue-cli

ステップ2: テンプレートのインポート

  1. 次のコマンドを使用して、新規のプロジェクトを作成します。

vue init OnsenUI/vue-cordova-webpack projectName
  1. プロジェクトフォルダーに移動して、次のコマンドを実行します。

cd projectName
npm install

ステップ 3 : Monaca CLIでの実行

Monaca CLIで下記のことが可能となります。

  • ローカル上でのプロジェクトの新規作成、Monaca クラウド上に保存されたプロジェクトのインポート ( クラウドからローカルへ ) またはクローン ( clone ) 。

  • お好みのコードエディターを利用してMonaca アプリの開発。

  • アプリのデバッグをMonaca デバッガーやブラウザで行えます。

  • プロジェクトのリモートビルド ( ローカル上での各種セットアップは必要ありません ) 。

要件

Monaca CLIのインストールをしていない場合は、下記のコマンドを実行してください。

npm install -g monaca

テンプレートの実行

このセクションでは、Vueテンプレートを使用してMonaca CLIを使用する方法を示します。 Monacaの機能を利用するには、以下の手順に沿って試してください。

  1. リリース用にテンプレートをビルドし、www フォルダーにファイルを生成します。

monaca transpile
  1. 開発モードで実行し、ホットモジュール機能を利用して変更箇所をメモリに読み込みます。

monaca preview
../../../_images/114.png

または、 monaca demo を使用して、ブラウザ上で iOS と Android を同時にプレビューすることができます。

npm run build:watch  // In a different terminal
monaca demo
../../../_images/212.png
  1. 実機でのデバッグは、下記のコマンドで実行できます。

npm run build:watch  // In a different terminal
monaca debug
../../../_images/3_1.png
../../../_images/3_2.png
  1. 下記のコマンドでプロジェクトを簡単にiOSとAndroidのアプリとして作成できます。

monaca remote build --browser
../../../_images/48.png

詳細については、次の内容を参照してください。