Language: ENCN

Starter App Templates

There are three ready to use templates to start your app developement using Framework7 and Vue.

Framework7 Vue Simple Template

This is the most simple static template without any builder and development server. It provides setup in a single HTML file

This template is targeted at beginners who want to start exploring Framework7 + Vue without the distraction of a complicated development environment.

For advanced features such as asset compilation, hot-reload and CSS extraction, we recommend that more experienced developers use one of the other templates: Framework7 Vue Webpack Template or Framework7 Vue Browserify Template.

Download template from its GitHub repository or

$ git clone https://github.com/nolimits4web/Framework7-Vue-Simple-Template my-app

Framework7 Vue Webpack App Template

This is the most powerful template which includes full-featured Framework7 + Vue + Webpack setup with hot-reload, single file components (.vue) support & css extraction.

Install

Download template from its GitHub repository or

$ git clone https://github.com/nolimits4web/Framework7-Vue-Webpack-Template my-app

Go to the downloaded project folder and install dependencies:

$ npm install

Run development environment

$ npm run dev

App will run server with hot reload at localhost:8080

Build for production

When your app is ready you need to build it for production:

$ npm run build

Project Structure

  • src/assets - folder with static assets (images)
  • src/components - folder with custom .vue components
  • src/css - put custom app CSS styles here. Don't forget to import them in main.js
  • src/pages - app .vue pages
  • src/main.js - main app file where you include/import all required libs and init app
  • src/routes.js - app routes
  • src/app.vue - main app structure/component

Framework7 Vue Browserify App Template

Another powerful template which includes Framework7 + Vue + Browserify setup with hot-reload, single file components (.vue) support & css extraction.

Install

Download template from its GitHub repository or

$ git clone https://github.com/nolimits4web/Framework7-Vue-Browserify-Template my-app

Go to the downloaded project folder and install dependencies:

$ npm install

Run development environment

$ npm run dev

App will run server with hot reload at localhost:8080

Build for production

When your app is ready you need to build it for production:

$ npm run build

Project Structure

  • src/components - folder with custom .vue components
  • src/pages - app .vue pages
  • src/main.js - main app file where you include/import all required libs and init app
  • src/routes.js - app routes
  • src/app.vue - main app structure/component
  • dist/css - app styles, put custom app CSS styles here as well
  • dist/css/build.css - Vue components styles will be extracted here on npm run build

Framework7 Vue Webpack Cordova App Template

This template includes full-featured Framework7 + Vue + Webpack setup with hot-reload, single file components (.vue) support & css extraction with super cordova support.

Install

You can read instructions from its GitHub repository you can continue reading.

This template needs Node Js and Npm. You can find install instructions from Node Js home page.

If you don't have cordova or phonegap please install it with:

$ npm i cordova -g
or
$ npm i phonegap -g

Now you have NodeJs and Cordova-PhoneGap You can create a project with this template now:

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

Run Your Code

You can run every cordova-phonegap commands. You have one argument for development: -- --live-reload or -- --lr.

You can find cordova cli reference from Cordova Docs or phonegap cli reference from: Phonegap Docs

Sample Commands:

$ cordova (run|emulate) [android|ios|browser] [-- --lr]
or
$ phonegap (run|emulate) [android|ios|browser] [-- --lr]

Build for production

When your app is ready you need to build it for production:

$ cordova build --release
or
$ phonegap build --release

For more information about build: Cordova Android Platform Guide

Project Structure

  • src - Source files are here. Mostly your target is this directory.
  • src/assets/static - Your static assets like images, css, fonts, json, js, sass is here.
  • src/assets/static/css - put custom app CSS styles here. Don't forget to import them in main.js
  • src/assets/vue/pages - app .vue pages
  • src/assets/vue/components - folder with custom .vue components
  • src/main.js - main app file where you include/import all required libs and init app
  • src/routes.js - app routes
  • src/main.vue - main app structure/component

App Framework

iOS and Android Apps with HTML & JavaScript - develop, build and deploy - free and open source!

Visit the GitHub repository

Features

Features - Setup

  • Creation of a lightweight and well-organized project folder, prepared to push to GitHub
  • Demo App to use as base for your own application with typical use cases

Features - Design

  • Printable template to design your application with paper and pencil
  • Template for your icon design - as PDF for sketching and PPTX for drawing

Features - Development

  • Realize beautiful user interfaces with all well-known components and transitions, based on Framework7
  • Use comprehensive icon fonts like FontAwesome, Framework7, Ion and Material Icons
  • Make your user interface state-based and reactive with the power and simplicity of Vue.js
  • Easy to maintain single page components and time-saving UI components
  • One code base for all devices with HTML, CSS and JavaScript - realized with Cordova, supporting ES2015
  • Well prepared to use Firebase authentication, realtime database and storage services
  • State kept for history, tabs, scroll positions, focus, panels, modals, form inputs and page component data
  • Offline capability, flexible routing and multi-language support out of the box

Features - Testing

  • Integrated code checks for correctness and standard conformity
  • Development server with live reload, perfectly to use together with Chrome DevTools
  • Test your application on your own phone or any iOS or Android device with a simulator

Features - Building

  • Build process with version bump and compression of all HTML, CSS, JavaScript and image files
  • Generation of favicons, touch icons and splash screens out of a single image file
  • Phone frame around your application on big screens, so you can offer desktop access with charm
  • Automatic build as web application, to be used online and offline in the browser
  • Automatic Apple Xcode project build with Cordova
  • Automatic Android Studio project build with Cordova

Features - Deployment

  • Deployment without downtime
  • To your own server or web space as Web App
  • To the Firebase Hosting service as Web App
  • To the Apple App Store as native iOS App
  • To the Google Play Store as native Android App
  • Easy rollback solution

Features - Backup

  • Download your Firebase database content to a local JSON file
  • Create a ZIP file with all important project files to backup on any external drive or cloud service

Quick start