I have followed the procedures outlined here in the Framework7 
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
<meta name="color-scheme" content="light dark">
<meta name="apple-mobile-web-app-capable" content="yes">
<!--app title-->
<title>MyApp | F7 Cordova App </title>
<!-- Path to Framework7 Library Bundle CSS -->
<link rel="stylesheet" href="css/framework7.bundle.min.css">
<!-- Path to Framework7 Library Bundle JS-->
<script type="text/javascript" src="js/framework7.bundle.min.js"></script>
<!--custom stylesheet-->
<link rel="stylesheet" href="css/app.css">
<!--JQUERY UI CSS-->
<link rel="stylesheet" href="css/jquery-ui.css">
<!--JQUERY-->
<script src="js/jquery-3.6.0.min.js"></script>
<!--JQUERY UI JS-->
<script src="js/jquery-ui.js" type="text/javascript"></script>
</head>
<body>
<!-- App root element -->
<div id="app">
<!-- Your main view, should have "view-main" class -->
<div >
<!-- Initial Page, "data-name" contains page name -->
<div data-name="home" >
<!-- Top Navbar -->
<div >
<div ></div>
<div >
<div >Awesome App</div>
</div>
</div>
<!-- Bottom Toolbar -->
<div >
<div >
<!-- Toolbar links -->
<a href="#" >Link 1</a>
<a href="#" >Link 2</a>
</div>
</div>
<!-- Scrollable page content -->
<div >
<p>Page content goes here</p>
<!-- Link to another page -->
<a href="/about/">About app</a>
</div>
</div>
</div>
</div>
</body>
</html>
<!--scripts-->
<script src="cordova.js"></script>-->
<script src="js/app.js"></script>
CodePudding user response：
I was going about this wrong. I treated Framework7 just like any other regular framework (ie : mobileui). It's a little different workaround if you want to make it work with cordova. I did with the framework-ui, it's best to just brute force with the framework-cli.
Install Framework7-Cli
npm install framework7-cli -g
Install Cordova
npm install cordova -g
Create project directory
mkdir myapp
Enter directory
cd myapp
Run Framework7-cli
framework7 create
Framework 7 CLI will ask you questions on how it should setup your app. pick the following options:
1. Cordova app (target native iOS and Android).
2. Enter any name you would like to then enter
3. Just click enter on the App package (Bundle ID).
4. Pick Framework7 Core.
5. Tabbed Views.
6. No bundler.
7. No, use default color theme.
8. Yes, include icon fonts.
Let it work and finish...
Install http-serve in your myapp directory
npm install http-serve -g
Previewing the app in the browser
cd myapp/www
http-serve
NPM will give you 3 different addresses to see your F7 project
To compile your Cordova app
npm run build-cordova-android
or
npm run build-cordova-ios