話題のVue Nativeでサクッと「Hello World」してみた

Vue.jsでネイティブアプリを作ることができるVue Nativeが先日リリースされたので、さっそく触ってみました。

* What is Vue Native?

Vue NativeとはVue.jsを使ってネイティブアプリを構築するためのフレームワーク。
公式によると、中身はReact NativeのAPIをラップしているものとのこと。

公式のスライド
https://slides.com/gauravp/vue-native

* この記事を読み進める上での前提条件

- node 6.0 以上がグローバルにインストールされている
- npm 4.0 以上がグローバルにインストールされている
- React Native CLI がグローバルにインストールされている
- create-react-native-app がグローバルにインストールされている

node, npmのバージョンを確認するにはターミナルで以下のコマンドを実行します。

$ node -v
$ npm -v

そもそもインストールされていない場合は、下記の記事などを参考にインストールしてから本記事を読み進めてください。

React Native CLI, create-react-native-appは下記のコマンドをそれぞれ実行することでインストールすることができます。

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

* Vue Native CLIをインストールする

まずは下記コマンドを実行して、Vue Native CLIをインストールします。

$ npm install -g vue-native-cli

* Vue Native CLIでプロジェクトを作成する

次にインストールしたVue Native CLIを使ってプロジェクト作っていきましょう。

vue-native init <project_name>」を実行することで自動でVue Nativeのプロジェクトが作られます。
なお、今回作成するプロジェクトの名前は「startVueNative」とします。

$ vue-native init startVueNative

* 作成したアプリを起動する

先ほど作成した「startVueNative」のディレクトリに移動し、アプリを起動してみましょう。

$ cd startVueNative
$ yarn start

Packager started!」と表示されれば起動は完了です。

* iOSシミュレータで確認する

起動したターミナル上では、以下のような操作をすることができます。

- a を入力  ➡  Androidシミュレータの起動
- i  を入力  ➡  iOSシミュレータの起動
- q  を入力 ➡  QRを表示する
- r  を入力  ➡ 再起動
- R  を入力  ➡  キャッシュを消して再起動

今回はiOSシミュレータで確認をしたいのでiを入力します。
シミュレータ起動して以下のような画面が表示されれば確認は成功です。

* 「Hello World」と表示してみる

最後に「My Vue Native App」と表示されている部分を「Hello World」に変更してみましょう。

startVueNative」内のApp.vueを開いて、以下のように編集します。

<template>
  <view class="container">

    <!-- 変更前のコード -->
    <text class="text-color-primary">My Vue Native App</text>

    <!-- 変更後のコード -->
    <text class="text-color-primary">Hello World</text>

  </view>
</template>

ファイルの変更を保存すると、自動でリロードされ、以下のように「Hello World」を表示されます。


以上、『話題のVue Nativeでサクッと「Hello World」してみた』でした。

本記事に関するご質問は、Twitterでリプを送ってくださいm(_ _)m
Twitterアカウント↓


* エラーが出た際の対応方法

Q. 「yarn start」を実行した際にエラーが起きた場合

watchman」がインストールされていない可能性があるので、下記のコマンドでインストール後、再度「yarn start」を実行してみてください。

$ brew install watchman


Q. iOSシミュレータが起動しない場合

Xcode」がインストールされていない可能性があります。
下記の記事などを参考に、MacのAppStoreから「Xcode」をダウンロード、インストールしてください。


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

7
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。