オタクプログラマーの趣味ブログ

オタクでありプログラマーである私の完全なる趣味のブログです。いろんなことに中途半端に手を出すので内容は浅め。

Vue Native触ってみた

きっかけ

普段お仕事なんかではReact Nativeを使っているのですが、たまには違うもの触りたいって思いまして。

Native Scriptってのもあるんですけど、調べてみたらなんか実機ないとデバッグがめんどくさいのかな...?って感じがしたのでやめました。

Vue.jsは4年くらい前にほんの少し触った程度なんですが、まぁいけるんではないかと、謎の自信があってVue Nativeを試すことにしてみました。当たって砕けろです!!

導入

CLIのインストール

よくあるCLIをまずはインストールするぜ!!ってことで以下のコマンド実行します。

npm install -g vue-native-cli

プロジェクトの作成

vue-native init VueApp

すると「ホーム画面に表示するアプリ名何にする?^^」なんて聞かれるわけですが、こういうの大体日本語入力するとターミナルが大変なことになるのでとりあえずSampleとでも入力します。多分後で変更できると思うので。

プロジェクトの実行

ターミナルにも表示されている以下のコマンドを実行します。

cd VueApp
npm start

するとReact NativeのExpoでみたような画面がブラウザで起動します。

とりあえずiOSエミュレーターで起動...ってエラーになってしまいました。

iOSエミュレーター実行時エラー
iOSエミュレーターを実行しようとしたらエラーになった

エミュレーター自動で起動してくれないんでしょうか...

仕方ないので手動でエミュレーター起動して、もう一度実行したら成功しました。

Vue Native実行準備(iOS)
Vue NativeをiOSエミュレーターで実行する準備

...うん、すごく見覚えある。

それで、実行されたアプリがこちら。

Vue Native実行後
Vue Native実行後

開発サイクルとしてはReact Nativeのような感じでしょうか??

次回

実際のコードをいじってみたいですね。次回があるのか怪しいですけども。

ここまで読んでくださってありがとうございました。