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