Cordova+Vue+Mint-UI+Android构建Andriod app开发环境(一)

概要

软件安装清单:Node.js,Java JDK，gradle，Android Studio

Demo:https://download.csdn.net/download/javon_huang/10839244

步骤一：安装Java SDK

配置环境变量：

JAVA_HOME：C:\Program Files (x86)\Java\jdk1.8.0_91

CLASSPATH：.;%JAVA_HOME%\lib\tools.jar;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\bin;

Path：%JAVA_HOME%\bin;

备注:具体以安装目录路径为准。

使用命令测试是否安装成功

javac

步骤二：安装 gradle

移步官网下载指定zip，解压到指定的路径，并配置环境变量。

GRADLE_HOME： D:\Android\gradle

Path：%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;%GRADLE_HOME%\bin

使用命令测试是否安装成功

adb

步骤三：Android Studio安装

安装完成后配置环境变量，设置Android SDK路径，具体以实际安装路径为准

ANDROID_HOME： C:\Users\JavonHuang\AppData\Local\Android\Sdk

Path：%ANDROID_HOME%\tools；%ANDROID_HOME%\platform-tools；%GRADLE_HOME%\bin；

小结：配置总览

JAVA_HOME：C:\Program Files\Java\jdk1.8.0_191

CLASSPATH：.;%JAVA_HOME%\lib\tools.jar;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\bin;E：D:\Android\gradle

ANDROID_HOME：C:\Users\JavonHuang\AppData\Local\Android\Sdk

path:%JAVA_HOME%\bin;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;%GRADLE_HOME%\bin;D:\Android\apache-ant-1.9.7\bin

环境检查:

1.检查当前Cordova的开发环境：cordova requirements

步骤四：Cordova创建

1.全局安装Cordova：npm install -g cordova 

2.创建一个Cordova项目：cordova create helloworld javon.huang.helloworld HelloWorld

helloworld:项目文件夹名

avon.huang.helloworld:项目包名

Helloworld:项目名

3.进入项目文件夹cd helloworld,添加编译平台

安卓:cordova platform add android

IOS:cordova platform add ios

3.外部网络设置，添加白名单插件：cordova plugin add cordova-plugin-whitelist

步骤五：编译Cordova项目

1.全局编译：cordova build

2.安卓编译：cordova build android

3：IOS编译：cordova build ios

步骤六：Vscode插件Cordova Tools（直接调试时使用）

用于模拟开发界面。

小结：

1.至此Cordova的开发环境配置完成，在没有错误的情况下可以生成apk文件。

2.下一步即整合Vue项目

步骤七：集成Vue项目

1.构建Vue项目：vue init webpack

2.引入minit-ui：npm install mint-ui

3.引入axios: npm install axios

4.安装依赖：npm install --save vue-cordova

5.修改index.js

import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './App'
import router from './router'
import axios from 'axios'

Vue.use(MintUI)
Vue.config.productionTip = false
Vue.prototype.$axios=axios
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

 

5.修改webpack.base.conf.js，添加加载资源路径

{
   test: /\.css$/,
   include: [
   /src/,
   '/node_modules/mint-ui/lib/',  //增加此项导入其样式
    ],
    loader: "style!css"
 }

6.修改index.js将打包后的资源发布到Cordova编译路径www文件夹

    index: path.resolve(__dirname,'../www/index.html'),

    assetsRoot: path.resolve(__dirname,'../www'),

    assetsSubDirectory:'',

7.Vue项目启动:

1.编译：npm run build

2.启动：npm run dev

小结:支持整个开发环境搭建完毕，我们可以直接在同一个项目利用vue开发单页应用，在使用cordova进行apk打包。

问题1：在打包成app之后，可能会出现图片加载不出来的问题，主要要是打包之后图片的路径问题。可以通过修改utils.js指向路径。一下我的项目配置：