vue+cordova开发移动APP项目七七的博客-vue+cordova开发移动app项目

vue+cordova开发移动APP项目

一、环境(版本及配置)

1、node 12.13.1

执行命令查看版本

node -v 

显示版本号则安装成功。

2、cordova 9.0.0

执行命令查看版本

cordova -v 

显示版本号则安装成功。

3、vue cli 2.9.6

执行命令查看版本

vue -V 

显示版本号则安装成功。

4、Android SDK 安装及配置环境

执行命令查看安装成功

adb 

显示如此则表示安装配置完成。

5、gradle 6.0

执行命令查看版本

gradle -v 

到此vue+cordova开发环境就配置好了。

二、cordova创建项目

全局安装cordova

npm install -g cordova 

执行命令：

cordova create myApp1 org.apache.cordova.myApp myApp2 cd myApp1 

其中：

myApp1：cordova目录名

org.apache.cordova.myApp：包名

myApp2：项目名(在config.xml中查看)

生成cordova文件中

config.xml -包含应用相关信息，使用到的插件以及面向的平台

platforms – 包含应用运行平台如 Android 和 iOS 上对应的 Cordova 库

plugins – 包含应用所需插件的 Cordova 库，使得应用能够访问例如照相机和电池状态相关的事项。

www – 包含应用源代码，例如 HTML, JavaScript 和 CSS 文件

hooks – 包含为个性化应用编译系统所需的脚本

使用命令：

构建Android平台或者iOS平台

若未构建平台，platform文件是空的

cordova platform add android 

cordova platform add ios 

到这里，cordova项目就创建好了。

三、创建vue项目

全局安装vue脚手架

npm install -g vue npm install -g vue-cli 

为了方便，不需要每次编译都拷贝文件，可直接在cordova项目根目录中创建vue项目;也可以创建好之后拷贝到cordova项目的根目录中

使用命令创建vue项目

vue init webpack 项目名称 

创建完成。

目录结构：

到这里vue项目就创建完成了。

四、若要使用cordova打包vue项目则需要修改：

修改vue项目config/index.js文件

五、编译vue项目

在vue项目根目录执行命令

npm run build 

即可编译vue项目自动到cordova主目录下的www文件夹中。

六、调试打开apk软件

1、在cordova主目录下使用命令

cordova run android 

使用该命令联调android软件（需连接真机或者模拟器）。

2、执行命令

cordova build android 

使用此命令打包apk包platforms/android/app/build/outputs/apk/debug/app-debug.apk

打包完成啦。