TheLazy.Dev
Portfolio GitHub

Blog

vue |nativescript |todayilearned

NativeScript and Vue.js

futoase

Keiji Matsuzaki

Posted on November 18, 2017

NativeScript and Vue.js

NativeScript and Vue.js

image

NativeScript is supporting of cross platform for iOS and Android. With consisted of front-end platform solution.

Setup

Reference is this blog post.

> npm install -g nativescript
Enter fullscreen mode Exit fullscreen mode

After added command is tns.

> which tns
/Users/futoase/.nodenv/shims/tns
Enter fullscreen mode Exit fullscreen mode

Create sample product (directory).

> tns create sample-project
Enter fullscreen mode Exit fullscreen mode

Install nativescript-vue-plugin

> cd sample-project/
> npm install --save nativescript-vue
Enter fullscreen mode Exit fullscreen mode

Edit of app.js (Reference from Sample)

const Vue = require('nativescript-vue/dist/index');

new Vue({
  template: `
    <page>
      <stack-layout>
        <label text="Hello Vue!" style="background-color:#41b883;color:#ffffff;padding:10;text-align:center"></label>
      </stack-layout>
    </page>
  `,
}).$start();
Enter fullscreen mode Exit fullscreen mode

Running on Emulator

iOS 

> tns run ios
Enter fullscreen mode Exit fullscreen mode

image

Android

compile error

            try {
                // different java has different format for `java -version` command
                const output = (await this.$childProcess.spawnFromEvent("java", ["-version"], "exit")).stderr;
                this.javaVerCache = /(?:openjdk|java) version \"((?:\d+\.)+(?:\d+))/i.exec(output)[1];
            } catch (e) {
                this.javaVerCache = null;
            }
Enter fullscreen mode Exit fullscreen mode

Opened issue. issues#3148

error

Because Java 9 output version number from Stdout, But should be get version number from stdout in code...

Reference

💖 💪 🙅 🚩
futoase
Keiji Matsuzaki

Posted on November 18, 2017

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

NativeScript and Vue.js
vue NativeScript and Vue.js

November 18, 2017