转载自:https://www.jianshu.com/p/037e4634432d

一、安装 Npm

这里就不给出具体安装了,可以百度一下或者参考下面链接。

node.js安装  官方文档

二、安装 Vue脚手架

执行命令:

cnpm install --global vue-cli

三、安装 Cordova

已经安装cordova则跳过,否则执行下面命令:

npm install -g cordova

四、创建Cordova项目官方文档W3C文档

执行命令:

cordova create hello com.example.hello HelloWorld

参数说明:

名称必填描述
hello工程的文件夹名
com.example.hello应用程序的id, 名如果不指定的话默认为io.cordova.hellocordova
HelloWorldApp的名称

 

五、添加Android平台

执行命令

cordova platform add android

六、创建Vue项目vue2官网

执行命令

vue init webpack vue-app

在执行命令是会出现下面的配置选项,前3个分包为项目名称、项目描述、和作者。后面几个配置是js相关,一般没什么特殊要求可以按照下面配置。

最终的项目结构:

七、修改vue项目的index.html

1. 在head之间加入下面代码

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

 

如果加入<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">导致页面样式改变,如果改变则不加,否则还是建议加上。这段主要是防止跨站脚本攻击。

2. 修改vue-app文件中config下的index.js的build配置项

3. body中引入cordova.js

<body>
    <div id="app"></div>
    <script type="text/javascript" src="cordova.js"></script>
    <!-- built files will be auto injected -->
</body>

 

八、打包

1. 如果vue项目中修改或者添加了代码需要build到外层cordova项目的www文件中。(执行命令下面前,如果是新建的vue的项目别忘了先执行 npm i 这个命令去自带下载一下vue用到的组件。)

执行命令:(要cd到vue项目中执行)

npm run build

执行此命令,如果cordova没有www文件夹,会创建该文件并将vue的代码添加进来。如果有www文件则不会重复创建,只会把vue文件添加进来。

2. 如果需要打包android的apk可执行下面命令

cordova build android

3. 如果不需要打apk包,只要执行下面命令就可以项目运行在手机中。(主要手机要用数据线和电脑连接并开启usb调试的功能)

cordova run android

上面都是debug调试的方式。当然正式发布的时候是不可能使用debug包的。打成签名包有几种方式。我用的是androidstudio自带的签名打包方式。下面我会给出来网上找的打包签名的方式。

Android Studio签名打包的两种方式

cordova打包apk的正式签名

 

Cordova相关连接:

Cordova+Vue实现Android APP开发

Vue 2.0 + cordova 构建Android应用(一)

通过cordova将vue项目打包成app

cordova插件总结-跨平台开发的好助手!

cordova插件汇总大全

Vue相关连接:

vux官网

vuex官方文档

Vuex一篇文章总结

Vue.js——vue-router 60分钟快速入门

vue资源典藏

ECMAScript 6 入门:阮一峰

Logo

前往低代码交流专区

更多推荐