vue+cordova开发移动APP项目

vue+cordova开发移动APP项目

一、环境(版本及配置)

1、node 12.13.1

执行命令查看版本

node -v

vue+cordova开发移动APP项目_第1张图片

显示版本号则安装成功。

2、cordova 9.0.0

执行命令查看版本

cordova -v

在这里插入图片描述

显示版本号则安装成功。

3、vue cli 2.9.6

执行命令查看版本

vue -V

vue+cordova开发移动APP项目_第2张图片

显示版本号则安装成功。

4、Android SDK 安装及配置环境

执行命令查看安装成功

adb

vue+cordova开发移动APP项目_第3张图片

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

5、gradle 6.0

执行命令查看版本

gradle -v

vue+cordova开发移动APP项目_第4张图片

到此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开发移动APP项目_第5张图片

创建完成。

目录结构:
vue+cordova开发移动APP项目_第6张图片

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

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

修改vue项目config/index.js文件
vue+cordova开发移动APP项目_第7张图片

五、编译vue项目

在vue项目根目录执行命令

npm run build

vue+cordova开发移动APP项目_第8张图片

即可编译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

vue+cordova开发移动APP项目_第9张图片

vue+cordova开发移动APP项目_第10张图片

vue+cordova开发移动APP项目_第11张图片

打包完成啦。

你可能感兴趣的:(vue+cordova开发移动APP项目)