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