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

f:id:jun9632:20180620110835p:plain

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

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

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

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