1.官方GITHUB模板下载
1-1.安装
git clone https://github.com/nolimits4web/Framework7-Vue-Webpack-Template my-app
npm install
1-1-2. 模板目录结构
src/assets - 公共资源
src/components - 组件
src/css - css 代码
src/pages - app .vue页面
src/main.js - main 包含/导入所有必需的libs和init应用程序的应用程序文件 ()
src/routes.js - app 路由 (framework7-vue 中的路由导出的是数组)
src/app.vue - main 主要应用结构/组件
1-2.app.vue文件
<template>
<!-- App -->
<f7-app :params="f7params">
<f7-view url="/" :main="true" class="ios-edges"></f7-view>
</f7-app>
</template>
<script>
// Import Routes...
import routes from './router'
export default {
data() {
return {
//具体参考 http://framework7.io/docs/app.html
f7params: {
theme: 'ios',// 主题 auto自适应; ios: 苹果; android:安卓
routes,// 路由(数组)
id: 'io.framework7',
touch:{
disableContextMenu: false // 是否开启上下文联动(移动端复制粘贴)
},
dialog: { // fw7-vue 选择框按钮内容
buttonOk: "确认",
buttonCancel: "取消"
},
}
}
}
}
</script>
二 vue项目中安装Framework7
1-初始化一个vue应用
vue init webpack framework7-vue-demo
2-安装framework7和framework7-vue
npm install framework7
npm install framework7-vue
3-修改vue文件结构（初始化App）
官网文档 Initialize App 这一节中的 ES Modules 有相应的指导，我们要修改的文件有index.html、main.js(my-app.js)、 app.vue。
首先是index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="theme-color" content="#2196f3">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<title> demo </title>
</head>
<body>
<div id="app"></div>
</body>
</html>
framework7-vue
main.js：
import Vue from 'vue'
import Framework7 from 'framework7/framework7.esm.bundle.js'
import Framework7Vue from 'framework7-vue/framework7-vue.esm.bundle.js'
import Framework7Theme from 'framework7/css/framework7.bundle.css' //我移植后发现这个引用并没有执行 应该引用下面的样式
import 'framework7/css/framework7.bundle.css';
Framework7.use(Framework7Vue);
import App from './app.vue';
new Vue({
el: '#app',
render: (h) => h(App),
});
app.vue：
import routes from './router'
export default {
data() {
return {
f7params: {
routes:routes,
name: 'My App',
id: 'com.myapp.test',
theme: 'auto',
view: {
pushState: true,
pushStateRoot: ' ' , //根URL分隔符也可以使用 document.location.pathname.split('index.html')[0]
pushStateSeparator: '#' //pushStateRoot为空字符才能使用，网址分隔符号 # !
}, //f7移植到vue后路由切换后刷新无法保存当前路由在app.vue中加入pushState属性和pushStateRoot属性以及让‘/’根路由匹配index.html
stackPages: true,
iosTouchRipple: true
}
}
}
}
index.js:
import home from '@/pages/home'
import changeNet from '@/pages/menu/changeNet.vue'
export default [
{
path: '/',
name: 'home',
component: home,
alias: '/index.html' //alias定向根目录的别名路径,必须加 不然打包后找不到你的首页
}, {
path: '/changeNet',
name: 'changeNet',
component: changeNet
},
]
