Nativescript Part 2 - nativescript-vue

Saturday, 21 April 2018 code ec2 nativescript

Install @vue/cli-init

First thing I needed was a global add-on for vue @vue/cli-init (assuming you already have vue installed).

> npm install -g @vue/cli-init

Create project

> vue init nativescript-vue/vue-cli-template <projectName>

this asked for a bunch of information:

? Project name <projectName>
? Project description <project description>
? Application name <project app name>
? Unique application identifier <com.projectname.app>
? Project version 1.0.0
? Author <author name>
? License No License
? Install vue-router? (experimental) Yes
? Install vuex? (state management) Yes
? Color scheme forest

   vue-cli · Generated "<projectName>".

Run Project

> npm i // this will install all project dependencies
> npm run watch:<platform>

platform can be ios or android

Hmm… seems to be stuck on Searching for devices. going to try android and see how that works.

ok, seems to have started the emulator. It’s installing the app now. Doing a gradle build… and boom! splash screen is loading.

Tried ios again… boom! now that worked too. No idea why it got stuck before.

Enable debugging

I need to be able to see logs from the app. Looking at the output in the console I can see that it says:

'NativeScript-Vue has "Vue.config.silent" set to true

So need to figure out how to set it to false so I can see output logs.

Ah got it! main.js has the following:

// Uncommment the following to see NativeScript-Vue output logs
// Vue.config.silent = false;

so I uncommented the second line there, now I can see console.log statements in the console.

This is quite exciting! I’ll spend the next few days learning the basics of nativescript development. As I learn I’ll continue to document my journey towards native app development with Nativescript.