OnsenUI - Vue - Webpack Cordova Template
You can start your new cordova project perfectly with this template.
This template uses:
- Cordova: 6.0.0
- Node.js: 6.5.0 (Supports ES6)
WARNING (For Linux and Mac OS users):
For live-reload i can't find easy way to do fixed version of this. But you can develop your app with this way:
cordova platform add ios browser(browser needs for development in live-reload mode.)
cordova run ios -- --lr(wait till app opens in your ios emulator or phone. it will close console output after publish, so live-reload will not work. don't close the app and go to next step.)
cordova run browser -- --lr(you can use live-reload in your phone-emulator and browser at same time. you can edit your files in live-reload mode now.)
Hooks are smart. They can fix some problems for you. Fix list:
npm installAutomatically checks node js dependencies.
namevariable if it has a space characters and auto saves. (It needed for npm install)
wwwfolder. You don't need to think about www folder. Your target is always
staticStatic assets automatically sync on live reload!
cordova.jsto html. You don't need to add to your file manually. It's helpful for webpack.
manifest.jsonSome cordova plugins needs manifest.json in root folder. If you add manifest.json file to your
srcfolder, our smart hooks automagically copy it to
Live Reload Related
config.xmlLive reload needs
<allow-navigation href="*"/>in development mode. So our smart hooks manages this too. You don't need to think about it.
live-reloadManages live-reload dependencies automatically. Just write your code, and don't think about dependencies.
device_router.htmlSmart router in live-reload mode. It searches for best available ip for connect server. if it can't find, you can write ip:port manually.
CordovaDeviceRouter.jsIn live-reload mode, you can connect to server from multiple devices. This file inject right
cordova.jsfile to page. So you can connect to webpack-dev-server from multiple devices at same time.
IMPORTANT: Phonegap build tools not supported currently. I suggest to use cordova with this template.
Our Magic words:
cordova create <project_create_dir> [com.example.projectname] [ProjectClassName] --template cordova-template-onsenui-vue-webpackphonegap create <project_create_dir> [com.example.projectname] [ProjectClassName] --template cordova-template-onsenui-vue-webpack
And you have your brand new cordova / phonegap project with OnsenUI- vue 2 and webpack 2!
One central node_modules folder for your projects
Yeah... That's right. You can share a node_modules folder with all your projects. Just make make sure it is in the parent directory of your projects folders. Like this:
- projects -- node_modules -- project1 -- project 2 -- package.json
And then edit the hookers.js file like this:
nodePath = '..' // tells the script to search for node_modules folder in the parent directorynodeModulesPath = path// Then comment out this below:nodeModulesPath = path
And there you go. You can always update your node_modules folder and install new packages by running:
npm install <package-name> --save-dev
You can use every cordova | phonegap commands.
You just have one more command option:
-- --lr. It starts live reload.
cordova run android -- --lr cordova run browser -- --live-reload phonegap run ios -- --lr
And 🎉 that's all folks!
You can check:
for more information.