)
Cordova模板安裝教程一條命令創建cordova-template-framework7-vue-webpack項目附PhoneGap用法【免費下載鏈接】cordova-template-framework7-vue-webpackFramework7 - Vue - Webpack Cordova Template with Webpack Dev Server and Hot Module Replacement項目地址: https://gitcode.com/gh_mirrors/co/cordova-template-framework7-vue-webpackcordova-template-framework7-vue-webpack是一個開箱即用的 Cordova 模板只需一條命令即可生成內置 Framework7、Vue、Vuex 和 Webpack 的移動端混合應用項目并自帶熱更新Live Reload開發體驗。本教程帶你用最少的步驟完成安裝、運行并附上 PhoneGap 等價用法。這個模板好在哪里在開始安裝前先了解它幫你省掉了哪些繁瑣工作特性說明 一條命令生成項目無需手動配置構建工具模板自帶完整腳手架 熱更新 Live Reload修改代碼后手機/瀏覽器自動刷新開發體驗接近原生 HBuilder 智能 Hooks 自動化自動管理www目錄、依賴安裝、cordova.js注入等 現代技術棧Framework7 5 Vue 2 Vuex Webpack 4 Babel模板內置的技術棧版本見 template_src/package.json最低環境要求為Cordova 6.0.0和Node.js 6.5.0支持 ES6。安裝 Cordova 模板完整三步走第1步準備 Node.js 與 Cordova CLI先安裝 Node.js6.5.0 及以上版本然后全局安裝 Cordova 命令行工具npm install -g cordova 如果你習慣用 PhoneGap CLI也可以全局安裝phonegap后續命令幾乎一致。第2步一條命令創建項目這是整個模板最魔法的地方——在--template后指定模板名其余全部自動生成cordova create 項目目錄 [com.example.項目名] [項目類名] --template cordova-template-framework7-vue-webpack實際例子創建名為MyApp的項目cordova create MyApp com.example.myapp MyApp --template cordova-template-framework7-vue-webpack執行后你會發現package.json中的依賴名已被智能 Hooks 自動清洗去除空格、www目錄已自動管理、npm install依賴自動檢查完畢。你唯一要關心的目錄是src文件夾所有開發工作都在這里進行模板源碼入口見 template_src/src/routes.js內置首頁、表單、聊天、Vuex 等示例頁面。第3步添加平臺并運行cd MyApp cordova platform add android cordova run android至此一個全新的 Framework7 Vue Webpack 移動應用就跑起來了PhoneGap 用法同樣一條命令使用 PhoneGap CLI 的開發者同樣受益只需把cordova換成phonegapphonegap create 項目目錄 [com.example.項目名] [項目類名] --template cordova-template-framework7-vue-webpack??注意根據官方 README.md 說明PhoneGap Build 云端打包工具目前不受支持建議直接使用 Cordova/PhoneGap CLI 本地構建。最快配置方法開啟熱更新開發模式模板獨有的-- --lrlive-reload選項是開發階段效率提升的關鍵。它基于webpack-dev-server支持熱模塊替換cordova run android -- --lr cordova run browser -- --live-reload phonegap run ios -- --lr開啟后代碼保存即刷新無需反復打包。幾個貼心細節 多設備同時連接開發服務器會自動為每臺設備注入正確的cordova.js實現見 template_src/webpack/dev_helpers/device_router.html? Linux/Mac 用戶可先cordova run ios -- --lr再cordova run browser -- --lr在瀏覽器中同時使用熱更新調試?config.xml中熱更新所需的allow-navigation href*/由 Hooks 在開發模式自動管理無需手動改動智能 Hooks幫你自動修復的問題模板的 Hooks 機制template_src/hooks/README.md 有簡要介紹會自動處理很多煩人的細節依賴檢查npm install時自動校驗 Node.js 依賴template_src/hooks/beforedep.js自動清理package.json的name含空格時自動重命名并保存www 目錄免維護永遠只關注src輸出目錄全自動同步靜態資源同步static文件夾在熱更新模式下自動同步到www/staticcordova.js 自動注入由CordovaHtmlOutputPlugin插件完成不用手動往 HTML 里加常見問題速查問題解答為什么不用管www文件夾Hooks 自動管理你的目標目錄永遠是src應用名有空格導致安裝失敗Hooks 已自動重命名package.json中的name無需手動處理部分 Cordova 插件報缺少 manifest.json把manifest.json放進srcHooks 會自動復制到www項目配置文件在哪看template_src/config.xml含插件、平臺、白名單配置小結安裝 Cordova 模板從未如此簡單一條cordova create ... --template命令你就擁有了 Framework7 Vue Webpack 的完整移動端項目加上-- --lr還能獲得熱更新開發體驗。無論是 Cordova 還是 PhoneGap CLI 用戶都能在三步內啟動開發。動手試試吧【免費下載鏈接】cordova-template-framework7-vue-webpackFramework7 - Vue - Webpack Cordova Template with Webpack Dev Server and Hot Module Replacement項目地址: https://gitcode.com/gh_mirrors/co/cordova-template-framework7-vue-webpack創作聲明:本文部分內容由AI輔助生成(AIGC),僅供參考