NativeScript and Vue.js

Keiji Matsuzaki — Sat, 18 Nov 2017 11:23:39 +0000

NativeScript and Vue.js

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

Setup

> npm install -g nativescript

After added command is tns.

> which tns
/Users/futoase/.nodenv/shims/tns

Create sample product (directory).

> tns create sample-project

Install nativescript-vue-plugin

> cd sample-project/
> npm install --save nativescript-vue

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();

Running on Emulator

iOS

> tns run ios

Android

compile error

reason is code error.
- this code point.

            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;
            }

Opened issue. issues#3148

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

DEV Community: Keiji Matsuzaki

NativeScript and Vue.js

NativeScript and Vue.js

Setup

Running on Emulator

iOS

Android

Reference