Monaca Docs
検索…
Vue 2 & Onsen UI 2 入門
Onue UI テンプレートを使用して Vue を Monaca CLI にインポートする方法を解説します。
ステップ 1 : Vue CLI のインストール
コマンドプロンプト ( Windows の場合 ) またはターミナル ( Mac の場合 ) を開き、次のコマンドを実行します。
1
npm install -g vue-cli
Copied!
ステップ2: テンプレートのインポート
- 1.次のコマンドを使用して、新規のプロジェクトを作成します。
1
vue init OnsenUI/vue-cordova-webpack projectName
Copied!
2. プロジェクトフォルダーに移動して、次のコマンドを実行します。
1
cd projectName
2
npm install
Copied!
ステップ 3 : Monaca CLI での実行
Monaca CLI で下記のことが可能となります。
- ローカル上でのプロジェクトの新規作成、Monaca クラウド上に保存されたプロジェクトのインポート ( クラウドからローカルへ ) またはクローン。
- お好みのコードエディターを利用して Monaca アプリの開発。
- アプリのデバッグを Monaca デバッガーやブラウザで行えます。
- プロジェクトのリモートビルド ( ローカル上での各種セットアップは必要ありません ) 。
要件
Monaca CLI をインストールしていない場合は、下記のコマンドを実行してください。
1
npm install -g monaca
Copied!
テンプレートの実行
このセクションでは、Vue テンプレートを使用して Monaca CLI を使用する方法を示します。 Monaca の機能を利用するには、以下の手順に沿って試してください。
- 1.リリース用にテンプレートをビルドし、
wwwフォルダーにファイルを生成します。
1
npm run build
Copied!
2. 開発モードで実行し、ホットモジュール機能を利用して変更箇所をメモリに読み込みます。
1
npm run dev
Copied!
1
monaca debug
Copied!
4. 下記のコマンドでプロジェクトを簡単に iOS と Android のアプリとして作成できます。
1
monaca remote build --browser
Copied!
詳細については、次の内容を参照してください。
最終更新 5mo ago