未分類

vue nativeの環境構築

iOS,Androidのアプリ制作を行うためにReact Nativeの環境構築を行います。
公式

$ node -v
v11.6.0
$ npm -v
6.5.0

要求は
node >= 6.0
npm >= 4.0
なのでこれより低かったりインストールされてなければ新しいバージョンを入れましょう。
nodeバージョン管理
Vue NativeはReact Nativeのラッパーなのでそちらも必要になります。インストール手順はこちら
React Nativeでのやり方は2つありますが、(no crnaというオプションもありますが)通常は片方しかインストールしていない場合はもう一方もインストールしておきましょう。

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

さていよいよVue Nativeをいれていきます。とはいってもここまできていたらあと少しです!

$ npm install -g vue-native-cli

これでインストールは完了です!
プロジェクトを作成するディレクトリに移動して(その下に更にプロジェクト名でディレクトリが作成されます)

$ vue-native init xxxxxxxx

(xxxxxxxxは任意のプロジェクト名)
これで直下にプロジェクト用ディレクトリが作成されているので

$ cd xxxxxxxx

でプロジェクトのディレクトリに移動しましょう。

$ npm start

この後はいろいろな方法でエミュレータを起動できます。
例としては"a"キーを押すとAndroidエミュレータが起動
"i"キーを押すとiOSエミュレータが起動します。

Expoのエラー

この記事を書いている時点では、Expoにバグがあったようでエラーが出ました。
解消方法はこちらの記事を参照させていただきました。
プロジェクトのディレクトリ内にあるpackage.jsonとapp.jsonを編集してnpmで入れ直します。

開発

ここまできたらApp.vueを編集するとライブリロードで自動的にエミュレータが更新されます。
お疲れ様でした。

-未分類