vue+cordova开发移动APP项目

vue+cordova开发移动APP项目

一、环境(版本及配置)

1、node 12.13.1

执行命令查看版本

node -v 

vue+cordova开发移动APP项目

显示版本号则安装成功。

2、cordova 9.0.0

执行命令查看版本

cordova -v 

vue+cordova开发移动APP项目

显示版本号则安装成功。

3、vue cli 2.9.6

执行命令查看版本

vue -V 

vue+cordova开发移动APP项目

显示版本号则安装成功。

4、Android SDK 安装及配置环境

执行命令查看安装成功

adb 

vue+cordova开发移动APP项目

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

5、gradle 6.0

执行命令查看版本

gradle -v 

vue+cordova开发移动APP项目

到此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项目

创建完成。

目录结构:
vue+cordova开发移动APP项目

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

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

修改vue项目config/index.js文件
vue+cordova开发移动APP项目

五、编译vue项目

在vue项目根目录执行命令

npm run build 

vue+cordova开发移动APP项目

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

vue+cordova开发移动APP项目

vue+cordova开发移动APP项目

打包完成啦。

区块链毕设网(www.qklbishe.com)全网最靠谱的原创区块链毕设代做网站
部分资料来自网络,侵权联系删除!
资源收费仅为搬运整理打赏费用,用户自愿支付 !
qklbishe.com区块链毕设代做网专注|以太坊fabric-计算机|java|毕业设计|代做平台 » vue+cordova开发移动APP项目

提供最优质的资源集合

立即查看 了解详情