VUE+Ionic，项目搭建&打包成APK

安装Vue&创建Vue工程

1.安装Vue CLI：

npm install -g vue-cli

2.创建新的Vue项目，创建最后一步会提醒是否使用npm install 自动安装，如果选择N，在第2步后，手动执行：npm install

vue init webpack my-project
或
vue create my-project
或
vue init webpack-simple my-project  (目录简单） 

#若想安装快速，在最后一步提示是否使用npm install命令时，选择no，cd到项目目录，自行安装，可使用cnpm命令，速度会更快
cnpm install

3.运行，若想改变端口，修改index.js

cd my-project
npm run dev

在Vue工程中安装Ionic依赖

安装ionic相关依赖（其中@ionic/core是组件部分，@ionic/vue是封装成Vue方式调用的接口部分）：

npm i @ionic/core @ionic/vue

安装完成后，在main.js中添加配置：

import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';

Vue.use(Ionic);

服务启动中遇到的问题：

warning  in ./node_modules/@ionic/vue/dist/ionic-vue.esm.js
"export 'ICON_PATHS' was not found in 'ionicons/icons'

解决办法：在工程目录下执行以下语句：

npm i ionicons@4.5.9-1 -D

打包APK

安装cordova：

npm install -g cordova

cordova -v  //验证

必备

• JDK
• Gradel
• Android Studio：http://www.android-studio.org/

安装要点

1.安装Android Studio后：修改文件

2.Android SDK licence需要处理，不然项目中做打包时会报错，SDK目录下，tools/bin文件夹，有一个sdkmanager.bat文件，一直同意即可

sdkmanager --licenses

创建Cordova项目

 cordova create cordovavueapp
 cordova platform add android
 cordova platform add ios

创建vue项目

可以在cordova项目目录下创建，为了后续的编译拷贝方便

引入ionice@core

index.html页面添加：

<link href="https://unpkg.com/@ionic/core@4.0.0-beta.13/css/ionic.bundle.css" rel="stylesheet">
<script src="https://unpkg.com/@ionic/core@4.0.0-beta.13/dist/ionic.js"></script>

在main.js加入

Vue.config.ignoredElements = [/^ion-/];

修改vue的config/index.js，修改bulid打包输出位置和index启动页面，位置改到cordva项目的www目录下，dev不变，当dev开发时，还是vue工程，当执行build命令时，会将打包项输出到www文件夹

在vue项目中执行build命令

npm run build

此时发布报错：cannot fid moudele ‘chalk’，这是缺失包，解决办法：尝试npm install 安装

调试打包apk软件

cd到cordova目录

cordova run android

打包成apk：打包后目录在：platform/android/app/build/outputs/apk/debug目录

cordova build android