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项目

1 cordova create cordovavueapp 2 cordova platform add android 3 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