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