Repository files navigation

TIP: Try out themaster branchit has been simplified and should work much better than the legacy version

NativeScript-Vue application template for quick prototyping with vue-cli (2.x).

This is a project template forvue-cli.

# Scaffold projectnpm install -g vue-clivue init nativescript-vue/vue-cli-template#legacy<project-name>cd<project-name># Install dependenciesnpm install# Build for productionnpm run buildnpm run build:<platform># Build, watch for changes and debug the applicationnpm run debugnpm run debug:<platform># Build, watch for changes and run the applicationnpm run watchnpm run watch:<platform># Clean the NativeScript application instance (i.e. rm -rf dist)npm run clean

When invoking the various npm scripts, omitting the platform will attempt to launchtns for both platforms, which will only work in a properly configured OSX environment.

This template orchestrates the native application build process via webpack with the clever use of theprepare.js andlaunch.js scripts located at the root of the project directory.These are invoked directly fromwebpack.config.js before the bundling step and viawebpack-synchronizable-shell-plugin, respectively.

First of all,prepare.js creates or updates the (disposable) instance of the NativeScript application insidedist.It does so by creating a recursive copy of thetemplate folder, where the default boilerplate for the NativeScript application is kept under version control for persistence.This means thetemplate directory can be opened with NativeScript Sidekick to adjust the various application settings and Android permissions (though building from there is not possible).

For these changes to take effect, the npm script must be restarted.

Since many NativeScript plugins rely on postinstall hooks to work properly, these are automatically copied frompackage.json to the dependencies section intemplate/package.json (changes to this file should be committed with the project).These plugins will be resolved externally by webpack (i.e. when the native package is built) with the use of thenativescript-vue-externals module, which identifies external {N} plugins in the project's dependencies.

Once the application instance is ready insidedist, webpack bundles the project sources fromsrc intodist/app for the specified platform(s).This is where NativeScript expects to find the files used to build the native application in the next and final step of the process.These files include the platform-specific scriptapp.<platform>.js and style sheetapp.<platform>.css, as well as the content of thesrc/assets directory (aliased as~).

Finally, thelaunch.js script is invoked once webpack has finished bundling the sources. This script executestns --path dist (i.e. NativeScript CLI) with the appropriate arguments for building, debugging or running the application on the specified platform(s).

Installing plugins differs slightly from the official NativeScriptdocumentation.

Instead oftns plugin add, simply usenpm install from the root of the project directory and clean thedist folder like so:

npm install<plugin-name>npm run clean

Please note that some plugins still have issues resolving with this template, visit the communitySlack for getting them to work and for general help.