cordova+vue Cordova 的环境搭建

cordova

安装node.js

去官网下载node.js（官网地址：https://nodejs.org），按默认路径安装。
　　安装完后在命令行输入

　　$ npm //(测试node.js是否安装成功)

全局安装cordova cli

　　$ npm install cordova -g
　　$ cordova //测试是否安装成功

部署android的开发环境

Mac系统下Android Studio配置Gradle
Mac下Android SDK配置环境变量的配置
react 配置教程
gradle 安装地址

# 注意是在 ~/.bash_profile 下配置
export ANDROID_HOME=$HOME/Library/Android/sdk
export GRADLE_HOME=/Applications/Android\ Studio.app/Contents/gradle-4.10.3
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$GRADLE_HOME/bin

安装环境：操作系统：windows 10 x64

• 安装JAVA JDK（以下的步骤都是了为支持android开发）
  需要下载和安装1.8及之后的版本，这里使用的是jdk-8u191-windows-x64.exe
  安装后设置环境变量
  JAVA_HOME C:\Program Files\Java\jdk1.8.0_191
  CLASSPATH .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar
  在Path中增加 %JAVA_HOME%\jre\bin 和 %JAVA_HOME%\bin

• 安装android SDK
  现在有了 developers.google.cn，不用FQ了，访问网址 https://developer.android.google.cn/studio/
  不要下载android studio ，找到下方的“仅限命令行工具”，下载器其中的 sdk-tools-windows-4333796.zip
  下载之后将内容加压到D:\Android\Android-SDK目录，其实就一个tools文件夹，bin下有sdkmanager.bat文件用户安装SDK，具体使用可以看 https://developer.android.google.cn/studio/command-line/sdkmanager
  设置环境变量，增加ANDROID_HOME，内容为D:\Android\Android-SDK，在Path中增加%ANDROID_HOME%\tools\bin和%ANDROID_HOME%\tools
  然后打开命令行，进入D:\Android\Android-SDK目录，运行以下命令，安装platfrom-tools，build-tools和安卓API

sdkmanager "platform-tools" "platforms;android-27"
sdkmanager "build-tools;27.0.0"

• 安装 gradle
  从 https://services.gradle.org/distributions/gradle-4.1-bin.zip ，下载zip文件，解压到C:\Gradle\gradle-4.1，然后将C:\Gradle\gradle-4.1\bin加入到Path环境变量

• 创建和编译cordova项目

打开命令行，执行 cordova create firstapp，创建一个工程，目录名为firstapp

进入firstapp目录，执行 cordova platform add android，增加安卓平台支持，版本为[email protected]，安卓的目标版本为android-27

执行 cordova requirements可以查看本工程的依赖项（JDK、androidsdk、gradle、android-target都已经安装）

执行cordova build android，会看到会试图下载https://services.gradle.org/distributions/gradle-4.1-all.zip

还会下载若干.pom文件和.jar文件，这些文件都比较小，下载速度比较快，只要在编译第一个工程时下载了，以后的工程编译时就不会重新下载了。我在安装时到了这一步，经常卡在某个文件不动，于是反复执行ctrl+c，重新build，多次之后下载成功，随之编译成功，生成apk文件。

创建cordova

进入到目标文件夹，然后执行下面的命令：

　　cordova create hello com.example.hello HelloWorld
　　cd hello
　　cordova platform add android
　　cordova build android
　　# build的时间比较长，请耐心等待，如果中间卡了，请按ctrl+C终端操作，再次输入cordova build

真机测试

用我们的数据线连接手机和电脑，允许手机USB调试,然后将我们打包过后的vue项目放到www文件夹下，最后运行项目就OK了。

# 创建Cordova项目
cordova create [projectName] [packageName]
# 添加平台
cordova platform add android
cordova platform add ios
# 移除android平台
cordova platform rm android
# 查看已添加的平台
cordova platform ls
# 添加插件
cordova plugin add [plugin-full-name]
# 删除插件
cordova plugin rm [plugin-full-name]
# 查看已添加的插件
cordova plugin ls
# 打包cordova项目到Android平台
cordova build android
cordova build ios
# 模拟器运行
cordova emulate ios
cordova emulate android
# 指定模拟器
cordova emulate ios --target='iPhone-11'
cordova emulate ios --target iPhone-6s