概要
NativeScriptを用いてVue.jsモバイルアプリを作る際の環境構築の手順をまとめました．
- NativeScript・・・本物のモバイルネイティブアプリをJavaScriptで開発するためのオープンソースフレームワーク
- NativeScript-Vue・・・Vue.jsを使ってモバイルアプリを作成するためのNativeScriptのプラグイン
環境
- Mac OS X 10.14.6
- Node.js v12.12.0
- NativeScript 6.1.2
- NativeScript-Vue 2.4.0
手順
NativeScriptのシステム要件のセットアップする
下記ページに従い，macOSでNativeScriptアプリをビルドして実行するために必要なすべてのシステム要件をセットアップします．
最後の手順でtns doctorコマンドを実行して問題が検出されなければ次のページに進む前に本記事に戻り，次の手順に進んでください．
NativeScript Advanced Setup — macOS - Native
Script Docs
「結局英語で書かれた公式ドキュメントかよ，読むの面倒だからQiita記事探してるんだよ」と思った方もいるかもしれません．しかし私の経験上，今回のような導入手順や環境構築に関しては最初から公式サイトを読みにいくのが最も時間を無駄にせずに済みます．
また，Androidエミュレータ（AVD）のセットアップ手順において，いくつか選択肢が示されていますが，もしAndroid Studioを使う場合は，以下の手順で日本語化できます．
MacでAndroid Studioを日本語化する - ソフラボの技術ブログ
NativeScript-Vueをインストールし開発を開始する
下記ページに従い，NativeScript-Vueのインストール，プロジェクト作成，ビルドを行います．幸いこちらは日本語ですね．
tns run android --bundleコマンドでAVDが立ち上がれば成功です．
ちなみにこれはPixel 2のAVDを使用した場合です．
動作確認
app/components/App.vueにmsg: "Hello!"と書かれた箇所があるので，それを編集してみてください．
画面に表示されているメッセージが自動で変わると思います．以上で環境構築は終わりです．