Framework7 Command-line Interface

The F7 CLI is a very powerful tool and the most recommended way to develop F7 applications.

Note: command-line Interface = CLI

F7 CLI allows you to select different variants when creating an application:

  • FrameworkFramework7 Core/Framework7-vue/framework7-React
  • Target platformPlatform selection: Web App/PWA/Cordova app (Can choose more)
  • Starter templateStart template selection: Single View/Tabs/Split View
  • Custom color themeCustom color theme
  • Generate required icons and splash screenIcon and launch screen selection

InstallationThe installation

Note: please add sudo before command.

Install Cordova globally:

$ npm install -g cordova
Copy the code

Then install F7 CLI globally:

$ npm install -g framework7-cli
Copy the code

If you encounter problems related to access errors, use the following command:

$ npm install -g framework7-cli --unsafe-perm=true --allow-root
Copy the code

Create AppCreate an

In the project directory, run the following command to create the application:

$ framework7 create
Copy the code

Note: Several questions about frameworks and templates (like NPM init) will be asked during command execution.

Create App User InterfaceVisual Creation application

Don’t like command line creation? This can be configured through a visual interface:

$ framework7 create --ui
Copy the code

Run the preceding command to open the configuration page. The default address is localhost:3001. You can also change the port number with the –port parameter:

$ framework7 create --ui --port 8080
Copy the code

Generate AssetsGenerating resource files

In the created project directory there is an assets-src directory, which contains ICONS and images of the resources on the launch screen. To generate your icon and boot screen image, you need to replace all the files in it (note the size and format of the image) and then execute the following command:

$ framework7 generate-assets
Copy the code

This makes it easy to use later.

Generate Assets User InterfaceVisually generate resource files

As above, configuration in visual form:

$ framework7 generate-assets --ui --port 8080
Copy the code

Cordova APIs

To run commands related to Cordova, run the following command in the project root directory:

$ framework7 cordova [..args]
Copy the code

Such as:

$ framework7 cordova plugin add cordova-plugin-statusbar
$ framework7 cordova plugin add cordova-plugin-splashscreen
$ framework7 cordova build ios
...
Copy the code

Add: Cordova Documentation