nativescript-vue / nativescript-vue-webpack-template Goto Github PK

View Code? Open in Web Editor NEW

105.0 105.0 11.0 2.05 MB

A WIP webpack template for nativescript-vue with (optional?) code-sharing

JavaScript 76.41% Vue 19.61% HTML 3.97%

nativescript-vue-webpack-template's Introduction

Yes, the image needs to be updated :)

NativeScript-Vue3 RC

NativeScript-Vue with Vue3 support now in RC!

Quick start

To get started, you can use the StackBlitz Template

...or locally:

ns create myAwesomeApp --template @nativescript-vue/template-blank@rc

cd myAwesomeApp
ns run ios|android

Vue Devtools

To use VueDevtools, run:

ns run ios|android --env.vueDevtools

This will launch the standalone VueDevtools, and connect to it once the app launches. Right now, devtools are only supported on iOS Simulators and Android Emulators, but physical device support should come soon (requires configuring a host/port that the device can connect to.).

On android, you must enable cleartext http traffic, otherwise any connections are silently dropped by the system. In the App_Resources/Android/src/main/AndroidManifext.xml add the following to your existing <application> tag:

<application ...
+  android:usesCleartextTraffic="true"
.../>

Issues

If you encounter any issues, please open a new issue with as much detail as possible.

Join Discord

Looking for V2?

The V2 version has been moved to the v2 branch

nativescript-vue-webpack-template's People

Contributors

Stargazers

Watchers

Forkers

tralves joshdsommer changjoo-park jwkicklighter yefengbar vsambor jcostasilva rchougui imload jordancaudill brunocodeman

nativescript-vue-webpack-template's Issues

Fail Npm Install

Hellow! I follow the quick start https://nativescript-vue.org/en/docs/getting-started/quick-start/
but I couldn't start the app. When I do npm install it fails.
Any help?

Thanks!

Juans-MacBook-Pro:sportsApp jpldev$ sudo npm install

[email protected] install /Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/fsevents
node install

[fsevents] Success: "/Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile

[email protected] install /Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/node-sass
node scripts/install.js

Unable to save binary /Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/node-sass/vendor/darwin-x64-57 : { Error: EACCES: permission denied,mkdir '/Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/node-sass/vendor'
at Object.fs.mkdirSync (fs.js:885:18)
at sync (/Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/mkdirp/index.js:71:13)
at Function.sync (/Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/mkdirp/index.js:77:24)
at checkAndDownloadBinary (/Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/node-sass/scripts/install.js:114:11)
at Object. (/Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/node-sass/scripts/install.js:157:1)
at Module._compile (module.js:643:30)
at Object.Module._extensions..js (module.js:654:10)
at Module.load (module.js:556:32)
at tryModuleLoad (module.js:499:12)
at Function.Module._load (module.js:491:3)
errno: -13,
code: 'EACCES',
syscall: 'mkdir',
path: '/Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/node-sass/vendor' }

[email protected] postinstall /Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/uglifyjs-webpack-plugin
node lib/post_install.js

[email protected] postinstall /Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/node-sass
node scripts/build.js

Building: /usr/local/bin/node /Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [ '/usr/local/bin/node',
gyp verb cli '/Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/node-gyp/bin/node-gyp.js',
gyp verb cli 'rebuild',
gyp verb cli '--verbose',
gyp verb cli '--libsass_ext=',
gyp verb cli '--libsass_cflags=',
gyp verb cli '--libsass_ldflags=',
gyp verb cli '--libsass_library=' ]
gyp info using [email protected]
gyp info using [email protected] | darwin | x64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb check python checking for Python executable "python2" in the PATH
gyp verb which failed Error: not found: python2
gyp verb which failed at getNotFoundError (/Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/which/which.js:13:12)
gyp verb which failed at F (/Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/which/which.js:68:19)
gyp verb which failed at E (/Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/which/which.js:80:29)
gyp verb which failed at /Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/which/which.js:89:16
gyp verb which failed at /Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/isexe/index.js:42:5
gyp verb which failed at /Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/isexe/mode.js:8:5
gyp verb which failed at FSReqWrap.oncomplete (fs.js:152:21)
gyp verb which failed python2 { Error: not found: python2
gyp verb which failed at getNotFoundError (/Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/which/which.js:13:12)
gyp verb which failed at F (/Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/which/which.js:68:19)
gyp verb which failed at E (/Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/which/which.js:80:29)
gyp verb which failed at /Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/which/which.js:89:16
gyp verb which failed at /Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/isexe/index.js:42:5
gyp verb which failed at /Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/isexe/mode.js:8:5
gyp verb which failed at FSReqWrap.oncomplete (fs.js:152:21)
gyp verb which failed stack: 'Error: not found: python2\n at getNotFoundError (/Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/which/which.js:13:12)\n at F (/Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/which/which.js:68:19)\n at E (/Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/which/which.js:80:29)\n at /Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/which/which.js:89:16\n at /Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/isexe/index.js:42:5\n at /Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/isexe/mode.js:8:5\n at FSReqWrap.oncomplete (fs.js:152:21)',
gyp verb which failed code: 'ENOENT' }
gyp verb check python checking for Python executable "python" in the PATH
gyp verb which succeeded python /usr/bin/python
gyp verb check python version /usr/bin/python -c "import platform; print(platform.python_version());" returned: "2.7.10\n"
gyp verb get node dir no --target version specified, falling back to host node version: 8.9.4
gyp verb command install [ '8.9.4' ]
gyp verb install input version string "8.9.4"
gyp verb install installing version: 8.9.4
gyp verb install --ensure was passed, so won't reinstall if already installed
gyp verb install version is already installed, need to check "installVersion"
gyp verb got "installVersion" 9
gyp verb needs "installVersion" 9
gyp verb install version is good
gyp verb get node dir target node version installed: 8.9.4
gyp verb build dir attempting to create "build" dir: /Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/node-sass/build
gyp ERR! configure error
gyp ERR! stack Error: EACCES: permission denied, mkdir '/Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/node-sass/build'
gyp ERR! System Darwin 16.7.0
gyp ERR! command "/usr/local/bin/node" "/Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /Users/jpldev/PersonalProjects/SportsApp/sportsApp/node_modules/node-sass
gyp ERR! node -v v8.9.4
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok
Build failed with error code: 1
npm WARN [email protected] requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No repository field.
npm WARN [email protected] license should be a valid SPDX license expression

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: node scripts/build.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/jpldev/.npm/_logs/2018-05-03T04_12_17_398Z-debug.log

Build failed when use tns plugins

I use node 9.3, npm 5.6, android studio 3.2, nativescript 3.4.1
Install nativescript-pro-ui and nativescript-gradient

Vue.registerElement('Gradient', () => require('nativescript-gradient').Gradient)
Vue.registerElement(
'RadSideDrawer',
() => require('nativescript-pro-ui/sidedrawer').RadSideDrawer
)

Build error with RadSideDrawer
System.err: java.lang.RuntimeException: Unable to start activity ComponentInfo{org.nativescript.vue.webpack/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: System.err: Calling js method onCreate failed System.err: TypeError: Could not load view for: radsidedrawer. Error: com.tns.NativeScriptException: Failed to find module: "../../styling/background", relative to: app/

Build error with gradient
System.err: java.lang.RuntimeException: Unable to start activity ComponentInfo{org.nativescript.vue.webpack/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: System.err: Calling js method onCreate failed System.err: TypeError: Could not load view for: gradient. Error: com.tns.NativeScriptException: Failed to find module: "./stack-layout-common", relative to: app/

when using other plugins I get similar errors

Update on template

Hi, are there any updates for this template?
I remember it was mentioned on the recent webinar, but it wasn't updated in months. Just want to check the current status, as it would be a pretty neat tool to have 😄

Changing the nativescript id

One gotcha that I found, hope its included in the readme

To change your nativescript id/ bundle id/ android package name, you need to:

go to build > prepare.js then change the APP_ID to your package name.
go to src > resources > Android >app.gradle change the applicationId to your package name
delete the dist folder if it exists (this will cause a full rebuild of the project when you do the next step)
run npm run tns -- run android

web pack build is failing npm run dev doesnt work

TypeError: Cannot read property 'thisCompilation' of undefined

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.