我的Android成长之路(17)---- cordova+vue开发移动应用(1)项目创建

因为工作需要,仅仅只会安卓开发已经不能满足公司的需求了,mui又感觉少了点什么,所以最近开始研究cordova+vue的方式开发移动应用,暂时还是只开发安卓端,iOS以后在慢慢研究,废话不多说直接上菜:

首先这一套开发跟安卓原生和h5最大的不同,就是没有那么多页面操作,需要考命令来实现很多操作,所以

第一步 先安装node.js

安装node.js网上有很多教程,这里就不多赘述了。

第二步 安装jdk

这个也不多说了,不要忘记配置环境变量就行。

第三步 安装Android Studio 和 SDK

这一步也不多说了

第四步 安装gradle

传送门

第五步 安装vue脚手架

npm install -g @vue/cli

恭喜,到这里前期步骤已经完成了,可以开始创建项目了!

 

创建步骤如下:

1.安装cordova

npm install -g cordova

2.创建cordova项目

cordova create myApp com.cn.xy.myApp myApp

我的Android成长之路(17)---- cordova+vue开发移动应用(1)项目创建_第1张图片

3.添加必要的平台,这里只添加安卓平台

cd myApp

cordova platform add android

cordova plugin add cordova-android-support-gradle-release --fetch

我的Android成长之路(17)---- cordova+vue开发移动应用(1)项目创建_第2张图片

我的Android成长之路(17)---- cordova+vue开发移动应用(1)项目创建_第3张图片

4.编译android app

    1.检查环境配置

    cordova requirements

    2.编译

    cordova build android

我的Android成长之路(17)---- cordova+vue开发移动应用(1)项目创建_第4张图片

5.运行android程序

cordova run android

 

下面开始添加vue

1.打开vue面板

vue ui

我的Android成长之路(17)---- cordova+vue开发移动应用(1)项目创建_第5张图片

会打开一个网页,点击创建

我的Android成长之路(17)---- cordova+vue开发移动应用(1)项目创建_第6张图片

2.创建一个vue项目

我的Android成长之路(17)---- cordova+vue开发移动应用(1)项目创建_第7张图片

3.预设

我的Android成长之路(17)---- cordova+vue开发移动应用(1)项目创建_第8张图片

4.选择引入的工具

知识点

Babel 是什么?

Babel 是一个 JavaScript 编译器,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中

我的Android成长之路(17)---- cordova+vue开发移动应用(1)项目创建_第9张图片

点击创建项目,会在cmd中运行,查看运行进度,运行完成后即可。

以上一个基础的cordova+vue项目已经创建完成了。

这里推荐一个适合vue的前端库,完成后页面会跳转到这个页面,点击左侧的插件即可

我的Android成长之路(17)---- cordova+vue开发移动应用(1)项目创建_第10张图片

我的Android成长之路(17)---- cordova+vue开发移动应用(1)项目创建_第11张图片

最后在推荐一个开发工具,Visual Studio Code

 

 

 

你可能感兴趣的:(Android,移动混合开发)