参考：原文PhoneGap Day Intermediate Workshop 2016是Framework7+传统js，这里一边讲解F7的基本概念，一边改为大家熟悉的Vue.js。最后，引入一些Phonegap打包App的一些小技巧。
前言
Framework7框架和Vue.js，就跟Ionic+Angular一样，有着深层次的配合！开发起来很多轮子都已经造好，事半功倍！
虽然这个在线音乐播放器App比较简单，但涵盖了F7+Phonegap基本的方方面面。
F7+Vue的教程很少，所以从简单实例入手很合适，大家最好手动码代码，不多，但绝对能加深理解。细细体会一下它有哪些便捷的地方，以及哪些要注意的，避免入坑。原文是用javascript，我们通过比较，也可以体会到Vue的简洁和强大！
要点：
- F7接近原生的各种组件
- 自带router，不需要vue-router了
- 自带Dom7.ajax，不需要vue-resouce了
- 大型项目建议使用vuex，本实例简单地使用store.js
- Phonegap打包Hybrid App的一些技巧
- 源码：https://github.com/kevinqqnj/spotifyApp
本实例完成图：
1. 用template模板初始化
注意uglify-js要单独安装
npm install phonegap -g
phonegap create spotifyApp --template cordova-template-framework7-vue-webpack
cd spotifyApp
npm install
npm install uglify-js@^2.8.0
phonegap platform add browser android
phonegap run browser -- --lr
这时，应该会弹出浏览器窗口，显示demo页面。
2. 添加Font Awesome Icon图标库
Framework7有内置的图标，但只是基本的，9个。
icon-back, icon-forward, icon-bars, icon-camera, icon-f7, icon-next, icon-prev, icon-plus
F7支持额外的图标库，比如Framework7 Icons、Material Icons、 FontAwesome、Ionicons等等。
这里以FontAwesome为例：下载 http://fontawesome.io/assets/font-awesome-4.7.0.zip ，然后解压css、fonts目录到：\spotifyApp\src\assets\\。
然后，在main.js引入即可：
# \spotifyApp\src\main.js
import './assets/css/font-awesome.min.css'
下面，你就可以在template里随意引用fa Icon了：
<i class="icon icon-bars"></i> // F7内置的图标
<i class="icon fa fa-star"></i> // FontAwesome图标
3. Framework7 View和Page概念
F7把常用的Mobile App视图功能都包装好了，大家先理解一下View和Page，这是最重要的基本概念，跟内置路由有密切联系:
- Views - 所有的可见view的容器。只允许有一个views
- View - 一个App，可以有多个单独的、可见的view，它有独立的settings、navigation、history。默认的主view带有class “.view-main”。最常见的多view场景，是iPad横屏应用：左边是导航view，右边是内容展示view
- Pages - 一个view下，所有page的容器
- Page - 每个page，代表一个web page。单个view下，可以有多个page，但同一时间只能显示一个page（由路由控制）
本实例的view+page:
由上可知，我们设置了一个view，它包含多个pages。主页面page是Index，带导航栏Navbar、工具栏Toolbar
4. 更新main视图：
修改layout为黑色：
# \spotifyApp\src\index.html
<body class="layout-dark">
修改main.vue，添加主page：
先删除template div#app之间的所有元素
# \spotifyApp\src\main.vue
<template>
<!-- App -->
<div id="app">
</div>
</template>
然后添加views - view - pages - page：
- f7-pages.navbar-through.toolbar-through 所有页面共享Navbar、Toolbar效果
- f7-navbar是在f7-view和
f7-pages中间，因为使用了navbar-through（注：其它子页面，f7-navbar是在f7-page内部！） - f7-list-item media，用于添加图标
- 注意f7-toolbar、text input, range input元素的使用
- 相比较原来F7的HTML，F7-vue节省了一半以上的代码哦
# \spotifyApp\src\main.vue
<template>
<!-- App -->
<div id="app">
<f7-views>
<!-- Main view-->
<f7-view main dynamicNavbar>
<!-- Top Navigation Bar-->
<f7-navbar>
<f7-nav-left>
<f7-link icon="icon-bars" open-panel="left"></f7-link>
</f7-nav-left>
<f7-nav-center>Spotify Browser</f7-nav-center>
</f7-navbar>
<!-- Pages -->
<f7-pages navbar-through toolbar-through>
<!-- Page, data-page contains page name-->
<f7-page name="index">
<!-- Scrollable page content-->
<f7-block-title>Criteria</f7-block-title>
<f7-list form>
<f7-list-item media="<i class='icon fa fa-music'></i>">
<f7-label>Songs</f7-label>
<f7-input type="text" placeholder="Search for..." value="" />
</f7-list-item>
<f7-list-item media="<i class='icon fa fa-list-ol'></i>">
<f7-label>Max Results</f7-label>
<f7-input type="range" id="numResults" min="0" max="50" step="1" value="20" />
<f7-input type="text" id="sliderVal" disabled value="20" />
</f7-list-item>
</f7-list>
<f7-block>
<div class="row">
<div class="col-100">
<f7-button id="btnSearch" class="button button-big button-fill color-green">Submit</f7-button>
</div>
</div>
</f7-block>
</f7-page>
</f7-pages>
<!-- Bottom Toolbar on every view unless no-toolbar class specified (see item template)-->
<f7-toolbar>
<f7-link href="http://www.spotify.com" class="link external">
<i class="icon icon-spotify"></i>
<p class="color-white"> Spotify</p>
</f7-link>
<f7-link href="http://www.idangero.us/framework7" class="link external">
<i class="icon icon-f7"></i>
</f7-link>
</f7-toolbar>
</f7-view>
</f7-views>
</div>
</template>
5. 自定义样式文件CSS:
以上的工具栏里，使用了自定义class，引用图片来作为icon。对于自己的CSS，建议统一放在main.css。
- 复制这个图片：spotify.png 到
\spotifyApp\src\assets\images\\目录 - 创建自己的css文件
main.css（如果你想用sass，则不需要新建，用默认的main.scss就行）
# \spotifyApp\src\assets\css\main.css
i.icon.icon-spotify {
width: 29px; height: 29px; background-image: url("../images/spotify.png"); margin-right: 3px;
}
不要忘了在 main.js里引用样式文件：
# \spotifyApp\src\main.js
import './assets/css/main.css'
6. 初始化App应用，关联slider和显示的数值
Framework7-vue初始化是在main.js，你可以对应用的全局参数自行定义，这里是所有的全局参数。
另外，在Vue组件内，你可以通过this.f7、this.$device、this.$theme、this.Dom7来对Framework7的instance，进行全面的操控。
- material: 设为true的话，界面会变成Google Material Design样式。本文用默认的iOS配色
- modalTitle: 设置所有Alert/Notify/Modal的标题
# \spotifyApp\src\main.js
// Init App
new Vue({
el: '#app',
template: '<app/>',
// Init Framework7 by passing parameters here
framework7: {
root: '#app',
/* Uncomment to enable Material theme: */
// material: true,
routes: Routes,
modalTitle: "Spotify Browser", // 用于所有Alert/Notify/Modal的标题
},
// Register App Component
components: {
app: App
}
})
关联range-input数据，这是Vue的强项，不用写一行代码，用v-model数据绑定实现了：
# \spotifyApp\src\main.vue
<template>
。。。
<f7-input type="range" id="numResults" min="0" max="50" step="1" v-model="sliderVal" />
<f7-input type="text" id="sliderVal" disabled :value="sliderVal" />
。。。
</template>
<script>
export default {
name: 'Index',
data() {
return {
sliderVal: 20,
}
},
mounted() {
window.Dom7(document).on('deviceready', () => {
console.log("Device is ready!");
});
},
}
</script>
7. 调用Spotify API，处理返回数据
App的主界面已经写好，下面开始处理数据。
--> 请看详解（2）
