ECのウェブ担当者のメモ

ECサイトを運営管理している、WEB担当プログラマのメモ

スポンサーリンク

Vue Nativeをインストールしてみたら想像以上に簡単だった!

f:id:jun9632:20180620110835p:plain

これまで、React Nativeが気になりながらも、学習コストを考えてVueを選択していたのですがVue Native が登場したんですね! 嬉しい状況です。

vue-native.io

早速、インストールから、最初の起動までを試してみました。

パッケージのインストール

vue-native-cli と create-react-native-app のパッケージをインストールします。

npm install -g vue-native-cli
npm install -g create-react-native-app

watchmanのインストール

watchmanがインストールされていないと npm start を実行した時にエラーが発生します

今回 blewでインストールします。

brew install watchman

プロジェクトの作成

プロジェクトを作成していきます。

今回プロジェクト名は 「test-vue-native」 として作成していますが、 適宜自由に変更してください。

vue-native init  test-vue-native

起動

cd test-vue-native
npm start

watchmanがインストールされていないと、下記のようなエラーが発生します。

See https://git.io/v5vcn for more information, either install watchman or run the following snippet:
  sudo sysctl -w kern.maxfiles=5242880
  sudo sysctl -w kern.maxfilesperproc=524288

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! test-vue-native@0.1.0 start: `react-native-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the test-vue-native@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

起動が成功したら 下記のようにどのように起動するかが表示されるの表示したいものをクリック

 › Press a to open Android device or emulator, or i to open iOS emulator.
 › Press s to send the app URL to your phone number or email address
 › Press q to display QR code.
 › Press r to restart packager, or R to restart packager and clear cache.
 › Press d to toggle development mode. (current mode: development)

今回 i で iosのエミュレータで起動しました。

f:id:jun9632:20180620103559p:plain

そのほかの動作は

  • a で Androidのエミュレータ起動
  • i で iOS エミュレータ起動
  • s で 電話番号かメールにアプリのURLを送信
  • q でQRコードを表示
  • r (小文字)で 再起動
  • R (大文字)でキャッシュを削除してから再起動
  • d で developモードとproductionモードの切り替え

感想

ここまでは、想像以上に簡単でした。

ここから、VueとNativeのコンポーネントを組み合わせればできるのかなというイメージでいますが アプリ初心者ので、モロモロ問題は出てきそうなので色々と試してみたいと思います。

参考サイト

Vue Native

GitHub - GeekyAnts/vue-native-core: Vue Native is a framework to build cross platform native mobile apps using JavaScript

Expo

GitHub - react-community/create-react-native-app: Create a React Native app on any OS with no build config.

関連記事

marketing-web.hatenablog.com

marketing-web.hatenablog.com