基於Vue2 搭建移動端 webapp 框架
1、vue專案
- 通過vue-cli腳手架建立專案,使用webpack進行打包,下邊是一整套命令。
#npm 版本最好是最新的,升級npm,node版本也有要求
npm i -g npm
# 安裝腳手架
npm install -g vue-cli
#初始化新建專案
vue init webpack vue-app
# install dependencies
# config/index.js 裡可以修改埠
npm install
# serve with hot reload at localhost:8080
npm run dev
# 打包專案
npm run build
# build for production and view the bundle analyzer report
npm run build --report
- 在index.html加入如下標籤,不讓他放大縮小
<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
npm run build
打包專案的時候,要修改config/index.js檔案,如圖所示
assetsPublicPath
預設是根路徑,改成當前相對路徑,或者為空也行
productionSourceMap
用來支援打包後的除錯,改為false,打包比較快
打包後的檔案會放到專案根路徑下的dist裡邊,後邊會用到。
- 複製檔案
因為webpack無法將你的圖片等資源放到合適位置,你執行index.html, 就會發現他請求的圖片地址是css/static/img,所以在package.json加入如下兩條命令。然後修改build命令,讓他壓縮完程式碼之後順便執行復制命令,這樣就不用每次動手去拷貝檔案了。
"build": "node build/build.js && npm run fixfont && npm run fiximg",
"fixfont": "xcopy %cd%\\dist\\static\\fonts %cd %\\dist\\static\\css\\static\\fonts /s /y /d /e /i",
"fiximg": "xcopy %cd%\\dist\\static\\img %cd%\\dist\\static\\css\\static\\img /s /y /d /e /i"
npm run build
*注意:打包好的index.html不能直接用瀏覽器開啟,打包的時候有提示。可以通過ide開發工具將index.html跑起來,看有沒有什麼錯誤,我這會提示圖片404找不到,很鬱悶他的請求路徑,最後按照他的路徑,吧img放到了css資料夾下。
2、cordova專案
打包好的vue H5專案需要使用cordova來打包成Android和ios專案。支援跨域 cordova官網命令介紹
建立一個cordova專案,app名稱mapp,包名(bundle id)是com.trgis,專案名是cordova-app
npm install -g cordova
cordova create cordova-app com.trgis mapp
將vue專案中打包後dist目錄下的檔案全部拷貝到cordova專案的www目錄下
cd cordova-app
打包ios或者android,本人用的是Android環境
cordova platform add ios --save
cordova platforms add android --save
這一步完成後,在專案platforms
資料夾下會發現多了資料夾,本人是Android環境,打包後的專案名是android。到這說明vue和cordova整合已經成功了。
3、使用androidstudio打包apk
cordova有提供命令支援編譯apk的命令,但是本人實在受不了那個速度,慢死了。所以才去Androidstudio進行編譯。直接使用as開啟cordova專案下platforms
裡邊的Android專案,會提示你升級gradle版本之類的,最好都升級。用as直接安裝在真機上進行除錯,到此Android打包完成,ios本人目前沒有環境,後期會更新帖子。
4、使用xcode8進行打包 —-只能在mac系統上進行
- 建立ios專案
首先的在mac上安裝node,然後用node安裝codorva,然後新建cordova專案
cordova platform add ios --save
安裝xcode
在appstore裡安裝xcode8,如果你的mac系統還沒有更新,還是更新一下,因為xcode8對系統版本有影響。安裝時間可能比較長,建議大家多等一會。安裝好以後,用xcode開啟剛才新建的ios專案,或者也可以在ios下面雙擊配置檔案,預設會開啟xcode,並載入專案。好吧,接下來就要搞一些煩人的操作了,ios就是麻煩。
xcode8 修改 app 應用圖表
ios的圖表限制比較嚴格,一般的圖表扔進去,編譯都過不了,這裡我們使用App Icon Gear 進行生成icon。在appstore搜尋安裝App Icon Gear,免費試用。雙擊開啟,按照圖片選擇。
按照圖片選擇好以後,將app的圖表,拖到左邊第一個框,這時候他就就會自動生成
這麼多圖片自己替換又不現實,當然也提供批量修改的功能,開啟xcode將icon的資料夾,拖到那個綠色箭頭的框裡,按照圖片操作,他就會批量替換。
如果發現打包好的圖片不對以後,在這裡選擇Appicon,其實就是找剛才生成的那個icon的檔案,好了,到這裡xcode8修改app icon圖表就算完成了。至於歡迎頁,和這步驟一樣,只不過第一步選擇的時候,要選擇橫屏還是豎屏。如果看完這個操作失敗了,不要灰心,再來一次,如果還是失敗了,點選檢視視屏教程