Cordova + vue 创建移动端

  1. 安装工具要求
    JDK 可以更新到最新版本
    Node.js V8.12
    谷歌浏览器 可以更新到最新版本
    androidSDK(installer_r24.4.1-windows) 可以更新到最新版本
    Gradle 可以更新到最新版本
    apache-ant-1.10.1 可以更新到最新版本

  2. 系统环境配置安装
    1).安装JDK 并配置环境变量
    Cordova + vue 创建移动端_第1张图片
    Cordova + vue 创建移动端_第2张图片
    2).安装 node.js
    尽量安装8.12版本, 为以后的热更新配置做准备,在此文档编写之前高版本的Node.js还不能正常配置热更新,会出现内置错误。
    3). 安装谷歌浏览器
    4). 安装 安卓SDK(installer_r24.4.1-windows) 安装目录 放在一个较大的盘 不要放在C盘 不要放在C盘 不要放在C盘 重要的事情来3 边 谁知道怎么改成红色的 。。。。
    Cordova + vue 创建移动端_第3张图片
    直接点击安装 。
    安卓环境变量配置
    新建ANDROID_HOME

Cordova + vue 创建移动端_第4张图片

Path 添加
%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\tools
Cordova + vue 创建移动端_第5张图片
5). Gradle
解压压缩包进行环境变量配置 GRADLE_HOME
Cordova + vue 创建移动端_第6张图片
Path 添加环境变量 %GRADLE_HOME%\bin
Cordova + vue 创建移动端_第7张图片
6.)如果你的系统是64 为的 并且内存比较大的话(8G 的不行 16G 的可以 这个大坑,差点摔死我) 不需要配置
在环境变量中添加一个系统变量,变量名:_JAVA_OPTIONS,变量值:-Xmx512M
7).配apache-ant
Cordova + vue 创建移动端_第8张图片
Path 添加 %ANT_HOME%\bin
Cordova + vue 创建移动端_第9张图片
3.开发环境安装
1). 全局安装Cordova cmd 下运行
npm install -g cordova

2). 全局安装 Vue 脚手架 cmd 下运行

npm install -g vue-cli

3). 全局安装热更新环境 cmd 下运行

npm install -g cordova-hot-code-push-cli
  1. 新建项目(项目根目录即为GHAPP 文件夹下 Vue目录即为GHAPP 文件夹下vue 文件夹 )
    1).cordova create GHAPP
    Cordova + vue 创建移动端_第10张图片

2). 添加打包的平台
项目 根目录下执行以下语句
cordova platform add android –save
cordova platform add ios –save
cordova platform add browser –save
3).创建Vue 项目
在项目根目录 下创建Vue 项目
vue init webpack vue
Cordova + vue 创建移动端_第11张图片
4)修改 \vue\config\ index.js 下的文件.
Cordova + vue 创建移动端_第12张图片
5). 修改 \vue\src\ main.js

document.addEventListener("deviceready", function() {
	new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})
})

Cordova + vue 创建移动端_第13张图片
原来的保留不然 npm run build 的文件不能再浏览器中显示。
5.开始打包
1). Vue 文件夹下执行生成

npm  run build

2).安装相应的安卓API
根目录下运行cordova platform 查看安卓版本 然后打开 SDK Manager.exe 进行安装
Cordova + vue 创建移动端_第14张图片
Cordova + vue 创建移动端_第15张图片
Cordova + vue 创建移动端_第16张图片
3). 生成 APP
根目录下运行 cordova build android

你可能感兴趣的:(移动端,Cordova,+,vue)