正文

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

IP云
IP云V管理员/24 阅读
11/25
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

安装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

   

   

    VUE+Ionic，项目搭建&打包成APK的更多相关文章
    
    
     
  1. 
      Android项目打包成APK文件
      
    
       第一步:右键单击该项目选择Export项目 显演示样例如以下界面:选择Exprot Android Application 第二步:输入项目名称,默认的情况下是原始的项目名称 下一步: 点击 Crea ...
      
    
     
    2. 
     
  2. 
      vue项目利用apicloud打包成apk过程
      
    
       最近公司要求我们用apicloud做一个app,正好利用这个机会学习下app的制作过程~ 页面的开发过程跟我们平时开发一样,利用vue把页面全部完成,最后进行npm run build将项目打包. 接 ...
      
    
     
    3. 
     
  3. 
      Android Studio将项目打包成apk
      
    
       Android Studio将项目打包成apk 第一种方法:适合自己调试用. (1)直接在项目中生成: (2)位置是在你的项目中 第二种方法:适合发布应用. (1)找到Generate Signed  ...
      
    
     
    4. 
     
  4. 
      uni-app初体验及打包成apk
      
    
       首先用HBuilderX新建建一个uni-app项目 新建一个目录ucenter,该目录下新建两个vue文件ucenter.vue和setting.vue ucenter.vue <templa ...
      
    
     
    5. 
     
  5. 
      初级——程序如何打包成apk文件
      
    
       将Eclipse Android项目打包成APK文件是本文要介绍的内容,主要是来了解并学习Eclipse Android打包的内容,具体关于Eclipse Android内容的详解来看本文.Eclip ...
      
    
     
    6. 
     
  6. 
      Expo大作战(十八)--expo如何发布成独立应用程序，打包成apk或者ipa，发布到对应应用商店
      
    
       简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...
      
    
     
    7. 
     
  7. 
      打包成apk，生成apk文件，上传到网站服务器提供链接下载
      
    
       Android开发把项目打包成apk: 做完一个Android项目之后,如何才能把项目发布到Internet上供别人使用呢?我们需要将自己的程序打包成Android安装包文件--APK(Android ...
      
    
     
    8. 
     
  8. 
      使用cordova把h5应用打包成apk
      
    
       由于h5应用开发不是本例重点,因此直接提供一个最简单的h5应用代码,此应用使用vue-cli框架开发 此h5应用叫vue1,用webstrom打开vue1,进行npm install安装引用 vue1 ...
      
    
     
    9. 
     
  9. 
      Vue的项目搭建及请求生命周期
      
    
       目录 Vue的项目搭建及请求生命周期 Vue-CLI的项目搭建 环境搭建 项目创建 pycharm运行Vue项目 Vue项目的大体结构 Vue的请求生命周期 两个小用法 Vue的项目搭建及请求生命周期 ...
      
    
     
    10. 
    

    

     随机推荐
     
    
      
  1. 
       jest 提示 Unexpected identifier 的解决方案
       
    
        概述 今天在玩 jest 的时候,发现用 import 就会报 Unexpected identifier 的错误.查了很久的资料,最后终于解决了. 参考资料:Jest tests can't pro ...
       
    
      
    2. 
      
  2. 
       如何保存不连着电脑跑monkey？如何跑多个APK的monkey？
       
    
        哈喽,大家有没有遇到用真机跑monkey的时候,跑到一半结果小手一抖不小心把线碰掉了,结果报告就没获取到啦~ 今天就来解决这个问题 1.如何保存不连着电脑跑monkey? 1).输入命令进入shell ...
       
    
      
    3. 
      
  3. 
       html的标签规范
       
    
        if/else标签{ % if condition1 %} ... display 1{ % elif conditon2 %} ... display 2{ % else % } ... displ ...
       
    
      
    4. 
      
  4. 
       diff patch比较文件打补丁
       
    
        比较文件将结果保存到patch文件:diff -u test1.txt test2.txt > patchfile test1.txt应用patch文件,并备份(test1.txt.orig): ...
       
    
      
    5. 
      
  5. 
       offsetof与container_of宏分析
       
    
        offsetof宏:结构体成员相对结构体的偏移位置 container_of:根据结构体成员的地址来获取结构体的地址 offsetof 宏 原型: #define offsetof(TYPE, MEM ...
       
    
      
    6. 
      
  6. 
       关于migration build failed的问题
       
    
        首先一定要执行dotnet restore 查看网站的依赖关系(有时候生成是不报错的但是restore会找不到文件路径) 检查执行命令的路径是否是正确的当前网站路径 build failed一定是生成 ...
       
    
      
    7. 
      
  7. 
       IntelliJ IDLE
       
    
        目录 IntelliJ IDLE java项目结构 代码生成 psvm sout 快捷键 更改代码提示快捷键 代码相关快捷键 窗口相关快捷键 Debug快捷键 主题导入 下载主题 导入主题 应用主题  ...
       
    
      
    8. 
      
  8. 
       P-残缺的棋盘
       
    
        Input 输入包含不超过10000 组数据.每组数据包含6个整数r1, c1, r2, c2, r3, c3 (1<=r1, c1, r2, c2, r3, c3<=8). 三个格子A, ...
       
    
      
    9. 
      
  9. 
       P2523 [HAOI2011]Problem c
       
    
        传送门 先考虑如何判断无解,设 $sum[i]$ 表示确定的人中,编号大于 $i$ 的人的人数 如果 $sum[i]>n-i+1$ 则无解,进一步考虑设 $f[i][j]$ 表示当前确定完编号大 ...
       
    
      
    10. 
      
  10. 
       neo4j 初探
       
    
        neo4j 初探 参考 转载:http://shomy.top/2018/06/08/neo4j-start/ 近期需要处理图数据,考察后打算使用neo4j, 相比其他一些图数据库,neo4j开源,跨 ...
       
    
      
    11. 
     

    

   
  
相关阅读
目录[+]