初探Cordova结合Vue

# 一、前言

我们可以使用cordova来打包现有的vue、react、angular应用为app，可以借助cordova来调用手机设备的原生能力，比如拍照、扫码、定位等

# 1.1 ionic3

ionic3=cordova+angular+ionicUI（Ionic UI组件+ Javascript API+Ionic Native）

• 优点：它提供了漂亮的UI组件库、强大的JS APi以及基于调用原生的的Native APi,可以让我们快速开发跨平台的混合APP以及移动web页面。（推荐*）
• 缺点：angular react vue开发的移动端应用要打包成app的时候得重新再学习ionic

# 1.2 cordova

cordova: 可以把html css js写的代码打包成app，还可以让js调用原生的api。cordova非常成熟、插件也非常多、扩展性也强，10年的历史

打包App有几个方案

• ionic
• reactNative
• weex
• flutter
• cordova+vue
• cordova+react
• cordova+angular

# 二、环境搭建

# 2.1 用cordova开发android 应用

• 安装jdk 、配置jdk
• 安装android studio
• 安装nodejs
• 安装cordova

## 淘宝源安装
npm install -g cordova --registry=https://registry.npm.taobao.org

cnpm install -g cordova

创建项目cordova create 项目名称

cordova create 项目名 com.公司名.项目名 类名 （建议）

cordova create cordovademo02  com.baidu.cordova  Cordovademo	

创建项目的时候注意包名称：发布上线打包的时候用到包名称，注意

修改应用包名名称参考：http://www.ionic.wang/article-index-id-91.html

修改应用包名名称：

• 修改config.xml里面的包名称
• 修改完成以后重新执行cordova platform add android

cd 到项目里面 cd cordovademo02

• 把android的平台添加到项目里面 cordova