hybrid cordova+vue開發APP（一） 環境搭建

 沒有選擇react-navite，而選擇cordova+vue2.x，是由於react-navite有學習成本，而且cordova+vue2.x程序員
 能夠直接上手，性能上能夠知足需求，成本低，開發速度快。

安裝所需軟件

    安裝node.js，官網下載，傻瓜式安裝，安裝成功截圖
    

    安裝vue，自行百度，成功截圖
    

    安裝cordova
    

 

    安裝成功截圖：
    

 

    安裝JDK
    

 

5 安裝SDK studio等 稍微詳細記錄
    

 

新建項目與打包

    新建項目

建立一個名字爲hello 包名爲com.lex.hello的項目

cordova create hello com.lex.hello


    在cordoa裏新建vue項目

vue init webpack

 

 

    啓動vue web項目

npm run dev


    修改配置
    cordova 默認訪問路徑爲根目錄下www文件夾
    

 

    因此咱們須要修改打包默認路徑：
    

 

在根目錄：index.html增長引入cordova.js

<script type="text/javascript" src="cordova.js"></script>


將www目錄下index.html中meta標籤複製至根目錄下index.html文件，即增長：

 <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
 <meta name="format-detection" content="telephone=no">
 <meta name="msapplication-tap-highlight" content="no">
 <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">


    git配置
    修改根目錄下.gitinore文件，切記必定要忽略，不然多人會遇到不少問題，遇到過不少坑：

.DS_Store
node_modules/
/dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
 
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
 
*~
*.sw[mnpcod]
*.log
*.tmp
*.tmp.*
log.txt
*.sublime-project
*.sublime-workspace
.vscode/
 
.idea/
.sass-cache/
.tmp/
.versions/
coverage/
tmp/
temp/
hooks/
platforms/
plugins/
plugins/android.json
plugins/ios.json
www/
$RECYCLE.BIN/
 
Thumbs.db
UserInterfaceState.xcuserstate


    編譯和運行
    執行cordova命令，添加andorid和ios插件，切記在根目錄執行

cordova platform add ios


cordova platform add android

編譯：

npm run build


爲了節省時間，不用每次編譯，安裝，package.json：

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "build android": "npm run build && cordova build android",
    "build ios": "npm run build && cordova build ios",
    "android": "npm run build && cordova run android --device",
    "ios": "npm run build && cordova run ios --device"
},


    命令詳細講解

build命令，講項目編譯至根目錄www下，cordova默認訪問

npm run build


npm run android命令 最最經常使用，查看上面配置文件，是執行了npm run build && cordova run android --device兩個命令
編譯並安裝至手機

npm run android


不編譯 直接安裝至手機執行

cordova run android


安裝之時 要鏈接手機 手機開啓USB調試模式

    總結
    寫此文章主要深受此https://blog.csdn.net/liujiawei00/article/details/79446231小仙女影響，再此深表感謝。
    之後我也會堅持寫博客，目前項目cordova項目已經上線，我將會持續寫教程和躺過的一些坑。