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/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-project
cnpm install
cnpm i babel-plugin-import -D
cnpm i vant -S
cnpm 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>
