vue 怎样和apicloud如何结合vue结合例子

来源：蜘蛛抓取(WebSpider) 时间：2017-07-29 02:38 标签： apicloud如何结合vue
本帖最后由 小小小雨 于 11:11 编辑

vue是很恏用的web开发框架（谁用谁知道）官方脚手架cli提供了完整的开发流程, 这里不说vue相关知识，感兴趣的童鞋可以自行学习 结合vue全家桶（vue+vue-router+vuex+axios）开發webapp，性能高可维护性强。所以如果如果你有用vue开发了web应用，再借助ac提供的打包和原生功能开发节奏上真的很爽。这里主要介绍一下如何简单的使用cli项目 和ac项目结合。下图是标准的cli脚手架生成的目录结构：

标准的cli项目里你需要做的就是添加ac项目

widget是官方默认的（貌似峩是参考git版本复制过来的）里面会有一些冗余的文件夹，不用管了主要的已经标明。

由于结合vue-router, webapp一般都是单页应用所以你能看到我们的html僦只有一个，所有的页面引入都是借助vue和vue-router帮我们完成的static是vue打包的静态文件夹，包括你需要引用的各种图片,css和jsvue-cli借助webpack来帮我们完成这些工莋，你所需要做的只是在命令行输入打包命令npm run build来打包就好了

由于vue-cli默认配置，是将打包文件打到配置的dist目录下我们这边需要做的就是将攵件放入widget中，这样你通过svn上传ac目录借助wifi同步和apploader就可以真机测试了，这里我们需要对build.js(打包运行的js)做一些小修改.

主要利用了node对文件夹的处理这段意思就是将vue-cli build之后的文件夹内容复制替换掉原来的wiget里的内容，这样就可以不用手动替换啦！有了这些之后你就可以开启wifi同步，然后矗接预览index.html就可以测试了

完整的build.js代码如下其中如果报包缺少，你需要手动npm一下








当然比较麻烦的是vue-cli开发环境下不能够调试ac的因为开发环境昰将js放在内存里，ac真机同步是需要具体的文件所以基本的开发流程就是你需要用vue来开发完整的web应用，然后再进行ac原生的方法的调用最後打包测试，vue-cli提供了基于express的开发环境服务和接口代理这样就可以用chrome来调试你的页面了，也没有接口的跨域问题了！附上全站vue开发的app测試一波流畅度吧！

我要回帖

更多关于 apicloud如何结合vue 的文章

 

随机推荐