APICloud+Vue+Vant 快速构建移动端APP
框架简介
APICloud
文档非常齐全，采用免费+收费形式，对于一个普通的APP来讲完全够用
云编译的形式，避免了环境繁琐的配置，非常方便
这里有一些资料，供参考：
创建第一个app
https://docs.apicloud.com/APICloud/creating-first-app
APICloud七天在线培训课教程
https://github.com/apicloudcom/APICloud-7Days-Online-Training-Tutorials
课程第一天
https://docs.apicloud.com/Seven/Day1
一周一APP 完整技术架构和流程
https://github.com/xiaoqiang730730/vue_apicloud/blob/master/doc/oneweekoneapp.md
Vue
中国比较流行的渐进式开发框架，开发体验很好，开发速度快。
官网： https://cn.vuejs.org/
官网教程： https://cn.vuejs.org/v2/guide/
官网API： https://cn.vuejs.org/v2/api/
Vant
因为查找的资料中使用了这个移动端框架，就用它了，当然还有很多推荐，例如：
AUI
https://github.com/liulangnan/aui
http://www.auicss.com/
SUI
http://m.sui.taobao.org/getting-started/
这里是Vant的官网：
https://youzan.github.io/vant/#/zh-CN/quickstart
基本使用记录
vue 脚手架开发
https://github.com/xiaoqiang730730/vue_apicloud/tree/master/doc
Vue项目中如何使用APICloud的接口
直接调用即可，不过需要在模拟器中进行调用才行。在浏览器中，会提示找不到对象
例如，在点击函数中，双向数据绑定：
this.msg = api.systemType引入库
.barelrc 配置。当然安装依赖什么的，就直接参考文档安装即可。
vue init xiaoqiang730730/vue_apicloud my-projectcnpm installcnpm i babel-plugin-import -D
cnpm i vant -Scnpm run start{"presets": [["env", {"modules": false,"targets": {"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]}}],"stage-2"],"plugins": ["transform-vue-jsx", "transform-runtime", ["import", {"libraryName": "vant","libraryDirectory": "es","style": true}]],"env": {"test": {"presets": ["env", "stage-2"],"plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]}}
}- 使用组件
关闭elint验证， config/index.js, 配置选项：
useEslint: false,组件使用测试代码：
<van-button type="default">清空</van-button>import { Button } from "vant";export default {name: "HelloWorld",components: {[Button.name]: Button},};
- APICloud 源代码配置，采用热更新的方式，其中配置方式，
主要步骤
（1）APIStudio 新建项目
（2）网页云控制台，模块/编译自定义 Loader
编辑 模板案例 中的 index.html 文件，修改结构 和 js 代码
<body><div id="wrap"><div id="header">div><div id="main" class="flex-con">div>div>
body>
<script type="text/javascript" src="./script/api.js">script>
<script type="text/javascript">window.apiready = function(){var header = $api.byId('header');//适配iOS 7+，Android 4.4+状态栏$api.fixStatusBar(header);var headerPos = $api.offset(header);var main = $api.byId('main');var mainPos = $api.offset(main);api.openFrame({name: 'main',//url: 'dist/html/index.html',//url: 'html/main.html',//url: 'http://172.16.5.6:8010/index.html',url: 'http://172.16.5.6:8080',bounces: true,rect: {x: 0,y: headerPos.h,w: 'auto',h: mainPos.h}});};
script>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！