【APICoud】手把手-如何在@vue-cli5上开发hybirdApp(Vue3+APICloud) 第一步准备工作

已于 2022-06-15 13:00:36 修改
阅读量366 收藏 2
点赞数 1
分类专栏： APIcloud 混合开发 Vue 文章标签： web app vscode vue.js javascript
于 2022-06-14 21:11:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30378295/article/details/125285325
版权
混合开发 同时被 3 个专栏收录
6 篇文章 0 订阅
订阅专栏
APIcloud
5 篇文章 0 订阅
订阅专栏
Vue
4 篇文章 0 订阅
订阅专栏

前言

为什么要在@vue-cli上开发，原因很简单APICloud(V2)开发模式和现在前端开发模式时代脱轨，开发只能使用ES5原生JS，功能越多维护起来相对困难，新特性ES6+兼容问题等等

所以采用@vue-cli5上开发APICloud应用解决以上问题，并且可以学习新特性拥抱前端生态应用

当然也已有一个项目开源放在github地址Vue3-APIcloud-Vant(拜托点个star)

前期准备工作

技术栈基于

  • ES2015+
  • Vue3
  • vue-cli5
  • APICloud

APICloud准备工作

创建应用

在这里插入图片描述

切换代码管理

在这里插入图片描述

在这里插入图片描述

使用SVN拉起代码

在这里插入图片描述

VScode

安装APICloud插件

在这里插入图片描述

在这里插入图片描述

@vue-cli创建一个Vue3项目

// 步骤可以选择自己喜欢的配置eslint prettier ts
vue create Vue3-APIcloud

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

迁移APICloud代码到Vue项目的public文件夹

APICloud代码

在这里插入图片描述

注意只需要res/script/wgt/config.xml
config.xml根目录需要一份

在这里插入图片描述

分段

【APICoud】手把手-如何在@vue-cli5上开发hybirdApp(Vue3+APICloud) 第二步开发应用

ldx96
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue_apicloud:使用vue和apicloud构建混合应用程序
04-23
介绍 使用vue和apicloud可以快速构建一个App。 todo app推送 自动更新(apicloud官方提供了，可以整合使用) 快速开始 # 1. 先检查下 Node.js 是否安装成功 $ node -v v10.0.0 $ npm -v 6.2.0 # 2. 由于众所周知的原因，可以考虑切换源为 taobao 源 $ npm set registry https://registry.npm.taobao.org/ # 3. 全局安装 vue-cli 一般是要 sudo 权限的 $ npm install --global vue-cli # 4. 全局安装 apicloud-cli, 这个在客户端中调试页面需要用到 $ npm install --global apicloud-cli # 5. 创建一个基于 vue_apicloud 模板的项目 $ vue init xia
记一次Vue Hybrid App（混合APP）开发
Benz_s600的博客
03-09 516
原文地址
Vue Apicloud CLI：一款高效的移动应用开发工具
最新发布
gitblog_00002的博客
04-24 250
Vue Apicloud CLI：一款高效的移动应用开发工具 项目地址:https://gitcode.com/viarotel-org/vue-apicloud-cli Vue Apicloud CLI 是一个基于 Vue.js 的命令行接口(CLI)工具，专门针对 Apicloud 平台设计，旨在简化和加速移动端（iOS, Android）的 WebApp 开发流程。借助 Vue 的强大功能和...
cordova+vue实现Hybrid APP开发
weixin_43777074的博客
01-13 471
1.安装cordova：npm install -g cordova 安装成功后可用：cordova -v查看版本 2.安装vue：npm install -g vue-cli 安装成功后查看版本：vue --version 3.创建cordova项目：cordova create appRoot 进入appRoot目录下，有如下结构： 使用指令：cordova platform查看可以安装的平...
当vue遇上Hybrid APP
qq_25674791的博客
10-27 281
Hybrid APP 优势 网上查了一圈，没有找到符合我内心的描述，所以就算忽略吧，反正优点很多，这不是我们要说的重点，忽略几百字或者几十字总有的 解决方案--jsbridge Hybrid网上很多，比较大型的方案还是推荐jsbridge，其最大优势在于方便于扩展，下面文章都是基于jsbridge来说的。 推荐两个成熟的库 iOS WebViewJavascriptBridge Android JsBridge 基本原理 这也不是这篇帖子的重点，上张网上盗来的图，个人看来这个图有些地方有点过期了，
【APICoud】手把手-如何在@vue-cli5上开发hybirdApp(Vue3+APICloud) 第二步开发应用
qq_30378295的博客
06-14 368
复制IP 修改vue-router模式为hash
手把手教你使用vue-cli脚手架(图文解析)
08-28
手把手教你使用vue-cli脚手架（图文解析） 本篇文章主要介绍了使用vue-cli脚手架的详细教程，从环境搭建到项目初始化的每一步骤都进行了详细的解析。下面是本篇文章的知识点总结： 一、Vue-cli脚手架的优势 * 有...
手把手教你用vue-cli搭建vue项目
04-07
手把手教你用vue-cli搭建vue项目
手把手教你vue-cli单页到多页应用的方法
12-09
第一步：cli一个vue项目 新建一个vue项目 官网 vue init webpack demo cli默认使用webpack的dev-server服务，这个服务是做不了单页的，需要手动建一个私服叫啥你随意 一般叫dev.server或者dev.client 第二步：添加...
配置NODE开发环境使用vue-cli脚手架搭建VUE—Admin项目
01-09
前言：VUE是目前最火的前端框架之一就业薪资很高，此篇文章手把手教您如何快速学会搭建使用VUE框架，对正在工作当中或打算学习VUE高薪就业的你来说，那么这门技术便是你手中的葵花宝典。 一、Linux系统下搭建VUE开发...
基于vue-cli3多页面开发apicloud应用
weixin_33720956的博客
06-02 589
之前开发项APP项目直接用APICloud+原生js的方式进行编写，整个项目下来发现开发慢，页面代码多且复杂，维护起来相对困难，而且文件大打包之后的APP会比较大，apicloud的框架也不好用，支持部分es67(像let、const、import等es6新特性不支持写的太难受了) 采用vue-cli+APIcloud的方式写解决以上痛点，开发灵活，并且打包之后体积更小速度更快 环境依赖 vue...
APICloud+Vuejs+Requirejs搭配开发
09-22
APICloud+Vuejs+Requirejs搭配pkaq-VueCloud-master
apicloud中vue处理购物车全选单选
01-15
使用vue在apicloud实现 购物车的全选单选 只要是拿一个字段作区分 那他去作区分 最麻烦的就是ios不能全选 但是我是经过api.systemType 做过处理 ios和安卓的区分 <input class="aui-radio" v-model="vo.is_select" v-if="api.systemType=='ios'" @touchstart.prevent="update_cart_selectss(index)" type="checkbox"> <input class="aui-radio" :checked="vo.is_select" v-else @click.stop="update_cart_selects(index)" type="checkbox"> ios下多个settimeout延迟加载 记住这一点
apicloud结合vue在移动端实现长按事件
123
12-11 298
看上图，使用apicloud+vue的方式在移动端实现点击加号和减号数字连续增加或减少的需求。本人不善于写字，直接上代码 HTML <span class="reduceClass" @touchstart="reduceStart" @touchend="reduceEnd">－</span> <span class="addClass" @touchstart="addStart" @touchend="addEnd" >＋</span> J.
@Vue/cli5 + Vue3 + APICloud
qq_30378295的博客
03-27 160
接下来你就可以开发的app啦，如果你觉得这个项目对你有帮助，可以给一个 star 支持下👍。
使用vue-cli3多页面开发apicloud应用
weixin_33885676的博客
01-30 928
apicloud的开发方式太古老了，官方出的那个cli也不咋地，分享一下基于vue-cli3开发apicloud的方式。 因为apicloud里面有window和frame的概念,所以肯定是多页面才能发挥出apicloud的优势。 不熟悉vue-cli3的，建议先看下文档 创建项目 vue create vue-for-apicloud 复制代码然后选择 Manually select featu...
apicloud结合vue-cli三端跨平台超快速开发
weixin_34192993的博客
09-11 368
看到我的标题的时候可能觉得我是吹牛的，我早就想试试webpack+apicloud结合起来来开发，用了官方的脚手架发现并不是我想要的开发速度，总之开发很麻烦，小项目就很慢的了，别说大一点的项目，编译起来简直不可想像！首先我要证明一下我的项目工程大小，上图315行76行光看接口的数量就能证明这个项目不小，这个项目放在apicloud官方项目中，可以说，写起来很舒服，但是后期维护...
vue-cli+apicloud-cli实现动态编译实时真机预览
TangAcrab的博客
03-15 736
一、起缘 通常我们使用vue-cli结合apicloud实现vue项目打包成app时，往往需要在h5端开发调试结束之后，最终将打包后的产物丢到apicloud项目中，并通过AppLoader进行真机调试和预览。再发现一些页面布局的像素偏差后，不得不修改文件并重新打包重复上述步骤。为避免如此，就需要在写代码的同时，可以在真机设备上查看页面效果。 二、vue-cli+apicloud-cli实时真机预览： 社区参考方案: https://github.com/zmy122177638/vue-apiCloud-
使用vue开发APICloud软件APP的教程
cuicuiniu521的博客
07-28 1443
如何自定义loader登录APICloud的官网，到达控制台，选择添加模块（可以添加h5不能实现的功能模块），点击模块下的自定义loader，点击编译xxx自定义loader。将自定的loader下载到手机端，安装后打开，如果遇到问题，可能是需要打开此app的存储，照相的权限。...
npx create-vue与npx --package @vue/cli vue的区别
04-25
npx create-vue 和 npx --package @vue/cli vue 都是用来创建一个新的 Vue 项目的命令，但是它们之间有一些区别。 - npx create-vue 是一个 Vue 官方提供的命令行工具，用于快速创建一个基础的 Vue 项目，它提供了...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值