capacitore framework7 javascript mobile app starter template

Demo

Framework7 CLI -Optionen

Framework7 -App erstellt mit folgenden Optionen:

 {
  "cwd": "/home/mateen/Documents/office data/mobile-apps/Framework7",
  "type": [
    "capacitor"
  ],
  "name": "Demo",
  "framework": "core",
  "template": "split-view",
  "bundler": "vite",
  "cssPreProcessor": "less",
  "theming": {
    "customColor": false,
    "color": "#007aff",
    "darkMode": false,
    "iconFonts": true
  },
  "customBuild": true,
  "customBuildConfig": {
    "rtl": false,
    "darkTheme": true,
    "lightTheme": true,
    "themes": [
      "ios",
      "md"
    ],
    "components": [
      "dialog",
      "popup",
      "login-screen",
      "popover",
      "actions",
      "sheet",
      "toast",
      "preloader",
      "progressbar",
      "sortable",
      "swipeout",
      "accordion",
      "contacts-list",
      "virtual-list",
      "list-index",
      "timeline",
      "tabs",
      "panel",
      "card",
      "chip",
      "form",
      "input",
      "checkbox",
      "radio",
      "toggle",
      "range",
      "stepper",
      "smart-select",
      "grid",
      "calendar",
      "picker",
      "infinite-scroll",
      "pull-to-refresh",
      "data-table",
      "fab",
      "searchbar",
      "messages",
      "messagebar",
      "swiper",
      "photo-browser",
      "notification",
      "autocomplete",
      "tooltip",
      "gauge",
      "skeleton",
      "color-picker",
      "treeview",
      "text-editor",
      "area-chart",
      "pie-chart",
      "breadcrumbs",
      "typography"
    ]
  },
  "pkg": "io.framework7.myapp",
  "capacitor": {
    "platforms": [
      "ios",
      "android"
    ]
  }
}

Abhängigkeiten installieren

Zunächst müssen wir Abhängigkeiten installieren und im Terminal ausgeführt werden

 npm install

NPM -Skripte

• start - Entwicklungsserver ausführen
• ? dev - Entwicklungsserver ausführen
• ? build - Web -App für die Produktion erstellen
• build-capacitor-ios -Build und kopieren Sie sie zum iOS-Kondensatorprojekt
• build-capacitor-android -Build-App und kopieren Sie sie in das Android-Kondensatorprojekt

Vite

Es gibt ein Vite -Bundler -Setup. Es erstellt und bündelt alle "Front-End" -Ressourcen. Sie sollten nur mit Dateien in /src -Ordner arbeiten. Vite config befindet sich in vite.config.js .

Kondensator

Dieses Projekt erstellt mit Kondensatorunterstützung. Das erste, was vor dem Start erforderlich ist, ist, Kondensatorplattformen hinzuzufügen, die im Terminal ausgeführt werden:

 npx cap add ios && npx cap add android

Weitere Beispiele und Verwendungsbeispiele finden Sie unter offizielle Kondensatordokumentation.

Vermögenswerte

Vermögenswerte (Symbole, Auflagebildschirme) Quellbilder im Ordner assets-src . Um Ihre eigenen Symbole und Begrüßungsbildschirmbilder zu generieren, müssen Sie alle Vermögenswerte in diesem Verzeichnis durch Ihre eigenen Bilder ersetzen (achten Sie auf Bildgröße und Format) und führen Sie den folgenden Befehl im Projektverzeichnis aus:

 framework7 assets

Oder starten Sie die Benutzeroberfläche, in der Sie Symbole und Aufschubbildschirme ändern können:

 framework7 assets --ui

Kondensatorvermögen

Kondensatorvermögen befinden sich im resources , das mit cordova-res Tool verwendet werden soll. Um mobile Apps zu generieren, die im Terminal ausgeführt werden:

 npx cordova-res

Weitere Verwendungsbeispiele finden Sie unter offizielle Dokumentation von Cordova-RES.

Dokumentation & Ressourcen

• Framework7 -Kerndokumentation

• Referenz für Framework7 -Symbole

• Community Forum

Support Framework7

Liebesrahmen7? Support -Projekt durch Spenden oder Versprechen an:

• Patreon: https://patreon.com/framework7
• OpenCollective: https://opencollective.com/framework7

 npx framework7-cli create --ui