安装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  //验证

必备

安装要点

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

VUE+Ionic,项目搭建&打包成APK的更多相关文章

  1. Android项目打包成APK文件

    第一步:右键单击该项目选择Export项目 显演示样例如以下界面:选择Exprot Android Application 第二步:输入项目名称,默认的情况下是原始的项目名称 下一步: 点击 Crea ...

  2. vue项目利用apicloud打包成apk过程

    最近公司要求我们用apicloud做一个app,正好利用这个机会学习下app的制作过程~ 页面的开发过程跟我们平时开发一样,利用vue把页面全部完成,最后进行npm run build将项目打包. 接 ...

  3. Android Studio将项目打包成apk

    Android Studio将项目打包成apk 第一种方法:适合自己调试用. (1)直接在项目中生成: (2)位置是在你的项目中 第二种方法:适合发布应用. (1)找到Generate Signed ...

  4. uni-app初体验及打包成apk

    首先用HBuilderX新建建一个uni-app项目 新建一个目录ucenter,该目录下新建两个vue文件ucenter.vue和setting.vue ucenter.vue <templa ...

  5. 初级——程序如何打包成apk文件

    将Eclipse Android项目打包成APK文件是本文要介绍的内容,主要是来了解并学习Eclipse Android打包的内容,具体关于Eclipse Android内容的详解来看本文.Eclip ...

  6. Expo大作战(十八)--expo如何发布成独立应用程序,打包成apk或者ipa,发布到对应应用商店

    简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...

  7. 打包成apk,生成apk文件,上传到网站服务器提供链接下载

    Android开发把项目打包成apk: 做完一个Android项目之后,如何才能把项目发布到Internet上供别人使用呢?我们需要将自己的程序打包成Android安装包文件--APK(Android ...

  8. 使用cordova把h5应用打包成apk

    由于h5应用开发不是本例重点,因此直接提供一个最简单的h5应用代码,此应用使用vue-cli框架开发 此h5应用叫vue1,用webstrom打开vue1,进行npm install安装引用 vue1 ...

  9. Vue的项目搭建及请求生命周期

    目录 Vue的项目搭建及请求生命周期 Vue-CLI的项目搭建 环境搭建 项目创建 pycharm运行Vue项目 Vue项目的大体结构 Vue的请求生命周期 两个小用法 Vue的项目搭建及请求生命周期 ...

随机推荐

  1. Selenium IDE安装及环境搭建教程

    摘自https://blog.csdn.net/ywyxb/article/details/59103683 Selenium IDE环境部署- Firefox浏览器Firefox-ESR版本下载(推 ...

  2. Windows环境下Mysql 5.7读写分离简单记录

    一.目的 本文记录了在Windows环境中,mysql数据库读写分离配置过程. 二.准备: Master机器:Windows 10 虚拟机,IP:192.168.3.32 Slave机器:Window ...

  3. Linux_文件系统、磁盘分区_RHEL7

    目录 目录 前言 文件系统 目录结构 文件的类型 文件系统损坏后的修复 磁盘分区 分区的类型 分区最小存储单元 查看当前分区的block的大小 分区格式 MBR格式 GPT格式 mount挂载指令 挂 ...

  4. Delphi XE2 之 FireMonkey 入门(40) - 控件基础: TMemo

    Delphi XE2 之 FireMonkey 入门(40) - 控件基础: TMemo 值得注意的变化: 1.其父类 TScrollBox 的许多特性也很有用处, 如:   Memo1.UseSma ...

  5. 【FICO系列】SAP FICO-模块 关于固定资产年结和折旧的问题

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[FICO系列]SAP FICO-模块 关于固定 ...

  6. Linux进程状态——top,ps中看到进程状态D,S,Z的含义

    在top和ps命令中有一列显示进程状态,分别有如下值: 值 含义 S 进程处于interruptable sleep状态 D 进程处于Uninterruptable sleep状态 R 进程处于运行状 ...

  7. SparkStreaming DStream转换

    1.无状态转换操作 (1)无状态转化操作就是把简单的RDD转化操作应用到每个批次上,也就是转换DStream中的每一个RDD. 部分无状态转化操作: (2)尽管这些函数韩起来像作用在整个流上一样,但事 ...

  8. webpack打包错误 ERROR in multi ./src/main.js ./dist/bundle.js

    webpack打包错误 ERROR in multi ./src/main.js ./dist/bundle.js:https://www.jianshu.com/p/a55fb5bf75e1

  9. 【五一qbxt】day3 动态规划

    动态规划 引例: 斐波那契数列: 边界条件:f0=0: f1=1: 能够直接被求出值的状态 不需要计算其他斐波那契数列的值直接可以得到结果: 转移方程:fn=fn-1+fn-2如何用已有状态求出未知状 ...

  10. HNUSTOJ-1638 遍地桔子(贪心)

    1638: 遍地桔子 时间限制: 1 Sec  内存限制: 128 MB提交: 711  解决: 134[提交][状态][讨论版] 题目描述 为了实验室的发展,队长决定在实验室外面的空地种桔子树.空地 ...