SlideShare a Scribd company logo
Vuenativeやりたい方向け
Vue.nativeとは
• Vue.jsでネイティブアプリが作れるツール。中身的にはReact Native
のAPIを使用
• 前提条件
• node 6.0以上
• npm 4.0以上
• React Native CLIがグローバルにインストール
• 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 init <プロジェクト名> // Create React Native App を使う
vue-native init <プロジェクト名> --no-crna // Create React Native App
を使わない
• 例として* helloVueNative という名前でCreate React Native Appを使
いプロジェクトを作成
• cd helloVueNative
• npm startで起動
以下、シュミレーターで表示できたら成功
さらに、やりたい人
• App.vueなどを編集してカスタマイズできます。
• 以下、公式URL https://vue-native.io/

More Related Content

What's hot

Vue.js with Go
Vue.js with GoVue.js with Go
Vue.js with Go
Kazuhiro Kubota
 
GitHubで「バッジ」を集めよう
GitHubで「バッジ」を集めようGitHubで「バッジ」を集めよう
GitHubで「バッジ」を集めよう
arukoh
 
node-gypを使ったネイティブモジュールの作成
node-gypを使ったネイティブモジュールの作成node-gypを使ったネイティブモジュールの作成
node-gypを使ったネイティブモジュールの作成
shigeki_ohtsu
 
Gradle入門
Gradle入門Gradle入門
Gradle入門
orekyuu
 
Harbor RegistryのReplication機能
Harbor RegistryのReplication機能Harbor RegistryのReplication機能
Harbor RegistryのReplication機能
Masanori Nara
 
Word bench7月号
Word bench7月号Word bench7月号
Word bench7月号
西村 州平
 
自作アプリをデプロイしてみた with Docker
自作アプリをデプロイしてみた with Docker自作アプリをデプロイしてみた with Docker
自作アプリをデプロイしてみた with Docker
iPride Co., Ltd.
 
RespClient - Minimal Redis Client for PowerShell
RespClient - Minimal Redis Client for PowerShellRespClient - Minimal Redis Client for PowerShell
RespClient - Minimal Redis Client for PowerShell
Yoshifumi Kawai
 
第9回rest勉強会 ダウンロード・アップロード編
第9回rest勉強会 ダウンロード・アップロード編第9回rest勉強会 ダウンロード・アップロード編
第9回rest勉強会 ダウンロード・アップロード編
ksimoji
 
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発
Yuta Matsumura
 
OSS Product feat. Gradle
OSS Product feat. GradleOSS Product feat. Gradle
OSS Product feat. Gradle
Yasuharu Nakano
 
2020/06/16 tsjp-azure-staticwebapps-vs_codespaces
2020/06/16 tsjp-azure-staticwebapps-vs_codespaces2020/06/16 tsjp-azure-staticwebapps-vs_codespaces
2020/06/16 tsjp-azure-staticwebapps-vs_codespaces
Issei Hiraoka
 
Idcfクラウド 初心者の事始め(2)資料
Idcfクラウド 初心者の事始め(2)資料Idcfクラウド 初心者の事始め(2)資料
Idcfクラウド 初心者の事始め(2)資料
Takako Miyagawa
 
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanakaGrunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Hisateru Tanaka
 
イケてる技術で品質を担保しつつスピード感のある開発を実現する冴えたやり方
イケてる技術で品質を担保しつつスピード感のある開発を実現する冴えたやり方イケてる技術で品質を担保しつつスピード感のある開発を実現する冴えたやり方
イケてる技術で品質を担保しつつスピード感のある開発を実現する冴えたやり方
Yuta Matsumura
 
Introduce React Native
Introduce React NativeIntroduce React Native
Introduce React Native
GMO-Z.com Vietnam Lab Center
 
Bicep + VS Code で楽々Azure Deploy
Bicep + VS Code で楽々Azure DeployBicep + VS Code で楽々Azure Deploy
Bicep + VS Code で楽々Azure Deploy
Takekazu Omi
 
Nuxt.js入門 2018/02/02 Vue.js入門勉強会@渋谷 発表資料
Nuxt.js入門 2018/02/02 Vue.js入門勉強会@渋谷 発表資料Nuxt.js入門 2018/02/02 Vue.js入門勉強会@渋谷 発表資料
Nuxt.js入門 2018/02/02 Vue.js入門勉強会@渋谷 発表資料
慎二 山田
 

What's hot (20)

Github第8章
Github第8章Github第8章
Github第8章
 
Vue.js with Go
Vue.js with GoVue.js with Go
Vue.js with Go
 
GitHubで「バッジ」を集めよう
GitHubで「バッジ」を集めようGitHubで「バッジ」を集めよう
GitHubで「バッジ」を集めよう
 
node-gypを使ったネイティブモジュールの作成
node-gypを使ったネイティブモジュールの作成node-gypを使ったネイティブモジュールの作成
node-gypを使ったネイティブモジュールの作成
 
Gradle入門
Gradle入門Gradle入門
Gradle入門
 
Harbor RegistryのReplication機能
Harbor RegistryのReplication機能Harbor RegistryのReplication機能
Harbor RegistryのReplication機能
 
Word bench7月号
Word bench7月号Word bench7月号
Word bench7月号
 
自作アプリをデプロイしてみた with Docker
自作アプリをデプロイしてみた with Docker自作アプリをデプロイしてみた with Docker
自作アプリをデプロイしてみた with Docker
 
RespClient - Minimal Redis Client for PowerShell
RespClient - Minimal Redis Client for PowerShellRespClient - Minimal Redis Client for PowerShell
RespClient - Minimal Redis Client for PowerShell
 
勉強会20140207
勉強会20140207勉強会20140207
勉強会20140207
 
第9回rest勉強会 ダウンロード・アップロード編
第9回rest勉強会 ダウンロード・アップロード編第9回rest勉強会 ダウンロード・アップロード編
第9回rest勉強会 ダウンロード・アップロード編
 
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発
 
OSS Product feat. Gradle
OSS Product feat. GradleOSS Product feat. Gradle
OSS Product feat. Gradle
 
2020/06/16 tsjp-azure-staticwebapps-vs_codespaces
2020/06/16 tsjp-azure-staticwebapps-vs_codespaces2020/06/16 tsjp-azure-staticwebapps-vs_codespaces
2020/06/16 tsjp-azure-staticwebapps-vs_codespaces
 
Idcfクラウド 初心者の事始め(2)資料
Idcfクラウド 初心者の事始め(2)資料Idcfクラウド 初心者の事始め(2)資料
Idcfクラウド 初心者の事始め(2)資料
 
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanakaGrunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
 
イケてる技術で品質を担保しつつスピード感のある開発を実現する冴えたやり方
イケてる技術で品質を担保しつつスピード感のある開発を実現する冴えたやり方イケてる技術で品質を担保しつつスピード感のある開発を実現する冴えたやり方
イケてる技術で品質を担保しつつスピード感のある開発を実現する冴えたやり方
 
Introduce React Native
Introduce React NativeIntroduce React Native
Introduce React Native
 
Bicep + VS Code で楽々Azure Deploy
Bicep + VS Code で楽々Azure DeployBicep + VS Code で楽々Azure Deploy
Bicep + VS Code で楽々Azure Deploy
 
Nuxt.js入門 2018/02/02 Vue.js入門勉強会@渋谷 発表資料
Nuxt.js入門 2018/02/02 Vue.js入門勉強会@渋谷 発表資料Nuxt.js入門 2018/02/02 Vue.js入門勉強会@渋谷 発表資料
Nuxt.js入門 2018/02/02 Vue.js入門勉強会@渋谷 発表資料
 

More from 卓馬 三浦

Pre react native0504
Pre react native0504Pre react native0504
Pre react native0504
卓馬 三浦
 
Pytorch
PytorchPytorch
Pytorch
卓馬 三浦
 
Vue
VueVue
React
ReactReact
GGA、10月12日開催@G's
GGA、10月12日開催@G'sGGA、10月12日開催@G's
GGA、10月12日開催@G's
卓馬 三浦
 
Shibuya a企画(最新)
Shibuya a企画(最新)Shibuya a企画(最新)
Shibuya a企画(最新)
卓馬 三浦
 
Gga? (3)
Gga? (3)Gga? (3)
Gga? (3)
卓馬 三浦
 
6協働学習とict活用
6協働学習とict活用6協働学習とict活用
6協働学習とict活用
卓馬 三浦
 
研究目的
研究目的研究目的
研究目的
卓馬 三浦
 

More from 卓馬 三浦 (13)

Scikit learn
Scikit learnScikit learn
Scikit learn
 
React native
React nativeReact native
React native
 
Scikit
ScikitScikit
Scikit
 
5 1
5 15 1
5 1
 
Pre react native0504
Pre react native0504Pre react native0504
Pre react native0504
 
Pytorch
PytorchPytorch
Pytorch
 
Vue
VueVue
Vue
 
React
ReactReact
React
 
GGA、10月12日開催@G's
GGA、10月12日開催@G'sGGA、10月12日開催@G's
GGA、10月12日開催@G's
 
Shibuya a企画(最新)
Shibuya a企画(最新)Shibuya a企画(最新)
Shibuya a企画(最新)
 
Gga? (3)
Gga? (3)Gga? (3)
Gga? (3)
 
6協働学習とict活用
6協働学習とict活用6協働学習とict活用
6協働学習とict活用
 
研究目的
研究目的研究目的
研究目的
 

Vuenative