capacitore framework7 javascript mobile app starter template

演示

Framework7 CLI選項

Framework7應用程序創建了以下選項：

 {
  "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"
    ]
  }
}

安裝依賴項

首先，我們需要安裝依賴項，在終端中運行

 npm install

NPM腳本

• start - 運行開發服務器
• ？ dev - 運行開發服務器
• ？ build - 構建用於生產的Web應用程序
• build-capacitor-ios構建應用程序並將其複製到iOS電容器項目
• build-capacitor-android構建應用程序並將其複製到Android電容器項目

Vite

有一個Vite Bundler設置。它編譯並捆綁了所有“前端”資源。您應該僅與位於/src文件夾中的文件一起使用。 Vite Config位於vite.config.js中。

電容器

這個項目在電容器支持下創建。開始啟動之前所需的第一件事是添加電容器平台，以終端運行：

 npx cap add ios && npx cap add android

查看官方電容器文檔以獲取更多示例和用法示例。

資產

資產（圖標，飛濺屏幕）源圖像位於assets-src文件夾中。要生成自己的圖標和濺起屏幕圖像，您將需要用自己的圖像替換此目錄中的所有資產（請注意圖像大小和格式），並在項目目錄中運行以下命令：

 framework7 assets

或啟動UI，您將能夠更改圖標並濺出屏幕：

 framework7 assets --ui

電容器資產

電容器資產位於resources文件夾中，該文件夾旨在與cordova-res工具一起使用。生成以終端運行的移動應用資產：

 npx cordova-res

查看官方Cordova-Res文檔以獲取更多用法示例。

文檔和資源

• Framework7核心文檔

• Framework7圖標參考

• 社區論壇

支持框架7

Love Framework7？通過捐贈或承諾支持支持項目：

• Patreon：https：//patreon.com/framework7
• OpenCollat​​e：https：//opencollactive.com/framework7

 npx framework7-cli create --ui