Cordova+Vue开发App的实践指南

什么是科多瓦

Cordova由Apache基金会支持。它使用HTML5+CSS3+JS为多平台APP程序构建开发框架。它支持调用手机系统（Android、IOS、Windows手机）的本地API。它可以将您编写的Web程序封装到本机APP外壳中，通常称为混合APP。本文介绍前端开发人员如何从0使用Vue构建一个简单的App

步骤1：安装cordova

安装cordova

Cordova提供了一种可在全球安装的脚手架工具。我们使用npm来安装它。如果你的电脑没有npm，你需要先安装它。节点本身有自己的npm包管理器。安装node后，我们打开命令行程序并输入以下命令以全局安装cordova：

npm安装-g cordova

下载后，输入cordova-v检查安装是否成功。如果出现相应的版本号，则安装成功。

创建cordova程序

安装后，让我们创建一个新的cordovaApp。在命令行上输入以下命令以创建新命令：

科多瓦创建学习科多瓦

它将在当前目录中生成以下项目结构：

形象

其中，我们重点关注www和platforms目录。我们编写的HTML/CSS/JS代码放在这个目录下。现在在这个目录下有一个由Cordova提供的示例项目代码。

平台用于存储为相应的系统平台打包的运行源代码。它现在是空的。我们执行以下命令以添加相应的平台：

cordova平台添加android--保存

cordova平台添加ios--保存

cordova平台添加浏览器--保存

添加后，我们可以看到平台文件夹下的android和ios文件夹。我们可以使用以下命令行查看我们添加的平台以及我们可以添加的所有平台：

cordova平台

添加平台后，我们可以使用cordova run＜platform＞来运行相应平台的代码，作为前端开发人员，我们可以首先在浏览器中运行我们的项目：cordovarun浏览器（如果您之前添加了浏览器平台）。默认情况下，它将在端口8000上打开项目：

形象

如果你想在Android平台上查看它的效果，你需要安装和配置Android SDK环境，包括Java JDK安装和环境变量配置、Android SDK安装和环境参数配置。这个过程可以通过Android studio更高效地安装和配置。当然，如果您的项目不涉及调用本机API，您可以直接下载管理工具。进入并单击“Android SDK Tools”，从下拉菜单中选择“SDK Tool”，然后在表中选择相应平台所需的SDK包。建议直接下载zip。下载后，在环境变量中配置（具体过程可以是百度，非常简单）。

配置完成后，在新下载的SDK Manager Exe文件中打开SDK Manager，在打开的界面中下载相应API级别的SDK（建议使用Android 8.0），必须安装Tools下的前三项。请注意，这些SDK相对较大，因此请准备硬盘空间。

配置所有环境后，您可以通过cordova run Android在Android系统中调试App的性能。

当然，如果您想打包apk可安装文件，也可以使用一行命令：

cordova构建android

成功打包的安装包可以在“平台”下找到→ 安卓→ App→ 建筑→ 输出→ 阿普克→ 调试”。

以上是一个简单的APP打包过程。

如何打包Vue项目

如果我们已经准备好Vue项目，并希望将Vue-cli项目打包到APP中，我们应该怎么做？只需将您的Vue项目文件夹移动到与cordova项目相同的级别（这不是必需的，但主要是为了良好的管理），如下所示：

形象

放置后，我们需要修改Vue项目的包配置文件：

配置-索引.js：

形象

构建-utils.js

形象

主要目的是在我们的cordova项目的www项目下设置Vue项目的包目录。

完成后，在vue项目目录下运行npm run build以打包vue项目。完成后，我们会发现我们打包的dist文件夹和索引出现在cordova项目Html条目文件的www文件夹下。

让我们回到cordova项目目录并在其下执行cordovabuild<；平台名称>您可以打包vue项目。

以上是使用Cordova项目构建APP的基本过程。当然，使用Cordova的原因是我们可以添加插件以获得Web开发所不具备的本地功能体验。学习并尝试这些东西。