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 is the most powerful template which 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