template logo

Framework7 - Vue - Webpack Cordova Template

You can start your new cordova project perfectly with this template.

This template uses:

Minimum Requirements

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.)

Features

Hooks are smart. They can fix some problems for you. Fix list:

npm install Automatically checks node js dependencies.
package.json Renames name variable if it has a space characters and auto saves. (It needed for npm install)
www Automatically manages www folder. You don't need to think about www folder. Your target is always src folder.
static Static assets automatically sync on live reload!
CordovaHtmlOutputPlugin Automatically adds cordova.js to html. You don't need to add to your file manually. It's helpful for webpack.
manifest.json Some cordova plugins needs manifest.json in root folder. If you add manifest.json file to your src folder, our smart hooks automagically copy it to www folder!

Live Reload Related

config.xml Live reload needs <allow-navigation href="*"/> in development mode. So our smart hooks manages this too. You don't need to think about it.
live-reload Manages live-reload dependencies automatically. Just write your code, and don't think about dependencies.
device_router.html Smart 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.js In live-reload mode, you can connect to server from multiple devices. This file inject right cordova.js file to page. So you can connect to webpack-dev-server from multiple devices at same time.

Installation

IMPORTANT: Phonegap build tools not supported currently. I suggest to use cordova with this template.

This template need cordova or phonegap, for more information cordova installation or phonegap installation.

Our Magic words:

cordova create <project_create_dir> [com.example.projectname] [ProjectClassName] --template cordova-template-framework7-vue-webpack
phonegap create <project_create_dir> [com.example.projectname] [ProjectClassName] --template cordova-template-framework7-vue-webpack

boom! :boom: you have your brand new cordova / phonegap project with framework7 - vue 2 and webpack 4!

such a wow!

Installation using pre-defined templates

Framework v5 version

cordova create cordova-template com.template DefaultTemplate --template git://github.com/caiobiodere/cordova-template-framework7-vue-webpack.git#master

Framework Single View v5 version

Still under development

Framework Tabbed Views v5 version

Still under development

Framework Split View v5 version

Still under development

Framework v3 version

cordova create cordova-template com.template DefaultTemplate --template git://github.com/caiobiodere/cordova-template-framework7-vue-webpack.git#feature/v3-default-template

Usage

You can use every cordova | phonegap commands. You just have one more command option: -- --lr. It starts live reload.

Example usage:

cordova run android -- --lr
cordova run browser -- --live-reload
phonegap run ios -- --lr

And :tada: that's all folks!

Using Cordova-Simulate from microsoft

We can use Microsoft Cordova-Simulate using:

Cordova-Simulate Plugin

You can check:

for more information.

19.01.2018 - 2.0.0

Added new framework7 (2.x.x) version from https://framework7.io/.
Added new framework7-vue (2.x.x) version from https://github.com/framework7io/framework7-vue.
Added new library fontawesome from http://fontawesome.io/.
Fixed templates inside static folder.

29.11.2017 - 1.2.1

Updated dependencies.
Fixed device.js related errors.

23.07.2017 - 1.2.0

Updated dependencies.

10.05.2017 - 1.1.3

Changed uglify-js dependency version.
Removed source-map-loader dependency.

04.05.2017 - 1.1.2

Added support for scss to one page component.
Chokidar dependency added to template's package.json.

25.04.2017 - 1.1.1

Added whitespace support to command paths. You can use folder names with whitespace now.

25.04.2017 - 1.1.0

Added static folder for static assets. Static folder directly copies to www folder on compile time also static folder automatically sync with www/static when you are using live-reload.
Directory structure changed.
Dependency added: chokidar

25.04.2017 - 1.0.12

Provided compatibility with latest webpack-dev-server update. Added ip:port to public argument for live reload.
The double nails were standardized as single nails in beforedep.js and hookers.js.

07.04.2017 - 1.0.11

Fixed Device_router.html has been made compatible with Android < 4.4.0.
Fixed key to vue lists

Thanks for konstantin-popov for fixes.
Added .editorconfig and files edited with this config.

14.03.2017 - 1.0.10

Added epipebomb for linux and mac os.
Fixed webpack ^2.2.1 support
Fixed buffer size for webpack outputs
Updated uglify js version to latest (for ES6 features)

17.01.2017 - 1.0.4

Dev-server supports hot-module-replacement now!

16.01.2017 - 1.0.1

Supports phonegap now!
Template now uses webpack-dev-server for live-reload. So cordova-plugin-browsersync dependency dropped.
webpack-dev-server dependency added.
You can use cordova (run|emulate) (ios|android|browser) -- --lr now. lr means live-reload.
Added before_deploy hook. You can check at: beforedep.js
hookers.js changed.
CordovaDeviceRouter.js added. In live-reload mode, server injects the cordova.js file according to where you are connecting.
device_router.html added. In live-reload mode, this file routes you to right location.

Detalhes do pacote

cordova-template-framework7-vue-webpack

readme (leia-me)