vue使用Framework7记录(一)：基础配置

接触Framework7有一段时间了，感觉就一个字：赞，爽。对比于Vue其他的手机端UI框架，Framework7的体验堪比原生，F7自带了路由系统，所以跳转页面什么的用F7的即可，会用VueRouter就会用F7Router。但是使用过程中，坑也是踩过不少，会陆续在后面的博客中记录。
先记上Framework7的官方文档地址：https://framework7.io/
我用的vue-cli3搭建的项目结构，Framework7用的版本v4.3.1：

安装Framework7, Framework7-vue, 并在main.js中引入

// Import F7
import Framework7 from "framework7/framework7.esm.bundle.js";
// Import F7 Vue Plugin
import Framework7Vue from "framework7-vue/framework7-vue.esm.bundle.js";
import "framework7/css/framework7.bundle.min.css";import 'framework7-icons'; // 若是需要F7的icon，需要安装并引入Framework7.use(Framework7Vue);

配置路由文件，在src下新建router文件夹，新建router.js

import Tabs from '@/views/Tabs.vue';
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';
import Contact from '@/views/Contact.vue';const routes = [{path: '/tabs/',component: Tabs,tabs: [     // 底部Tabbar配置，这里采用路由配置，也可用其他方法，具体见参照文档{path: '/',component: Home,id: 'home',},{path: '/about/',component: About,id: 'about',},{path: '/contact/',component: Contact,id: 'contact',}]},{path: '/actionsheet/',async(routeTo, routeFrom, resolve) {    // 路由懒加载用这种方法加载页面// dynamic import component; returns promiseconst vueComponent = () => import('./../components/ActionSheet.vue');// resolve promisevueComponent().then((vc) => {// resolve with componentresolve({ component: vc.default })});},},
]
export default routes;

3.在App.vue里面导入router.js

<template><f7-app :params="params"><!-- Statusbar --><f7-statusbar></f7-statusbar><f7-view url="/tabs/" main :stackPages="true"></f7-view></f7-app>
</template><script>
import routes from './router/index';
export default {name: 'app',data() {return {params: {name: 'Framework7-vue',id: 'DemoApp',theme: 'ios',  // 主题默认是auto, 实际上开发项目我们是需要统一主题的，routes: routes,}}}
}
</script>

4.Tabs.vue内容：

<template><!-- Tabs --><f7-page :no-navbar="true" no-swipeback><f7-toolbar tabbar bottom labels ><f7-link tab-link="" route-tab-id="home" icon-material="home" text="Home" href="./"></f7-link><f7-link tab-link="" route-tab-id="about" icon-material="group" text="About" href="./about/"></f7-link><f7-link tab-link="" route-tab-id="contact" icon-material="perm_identity" text="Contact" href="./contact/"></f7-link></f7-toolbar><f7-tabs routable><f7-tab id="home"></f7-tab><f7-tab id="about"></f7-tab><f7-tab id="contact"></f7-tab></f7-tabs></f7-page>
</template>

至此，基本配置就好了，启动应用，就可以看到运行Framework7了。

如有问题，欢迎留言。

vue使用Framework7记录(一)：基础配置相关推荐

vue 判断页面加载完成_在Vue+webpack中详细讲解基础配置
这篇文章主要介绍了Vue+webpack项目基础配置教程,需要的朋友可以参考下. 最近在学习webpack,跟着课程一个单页面应用,在这里记录一下. 这个部分主要讲了如何配置webpack的环境,以及 ...
vs vue 查看webpack安装成功_在Vue+webpack中详细讲解基础配置
这篇文章主要介绍了Vue+webpack项目基础配置教程,需要的朋友可以参考下. 最近在学习webpack,跟着课程一个单页面应用,在这里记录一下. 这个部分主要讲了如何配置webpack的环境,以及 ...
（超全）Vue.js学习笔记—webpack基础配置（webpack4+babel7+vue2）
webpack基础配置&&单文件组件与vue-loader 参考<Vue,js>实战(梁灏编著) 笔者近期学习Vue.js进阶篇,参考教程流程完成webpack.vue.b ...
vue学习日志--3-路由基础配置
路由使用Vue Router官方路由Home | Vue Router (vuejs.org) 在存放路由的文件夹创建index.js页面首先引入createRouter和createWebHash ...
Webpack 基础配置 Vue+Ts
写在前面多亏上次 Webpack打包类库踩坑(上期文章),让我重新想起来 Webpack 等相关打包工具的重要性,稍微做了下调研,发现其实很多稍微有些工作经验的人,对于 Webpack 的了解程度也 ...
spring boot @value_spring+vue全栈开发实战-第二章Spring Boot 基础配置-笔记0302-2020
Spring Boot 基础配置 1. Web 容器配置 2.Properties 配置 3.类型安全配置属性 1. Web 容器配置 a.常规配置在 Spring Boot 项目中,可以内置 ...
HAProxy详解（二）：HAProxy基础配置与应用实例
一.HAProxy基础配置与应用实例: 1.快速安装HAProxy集群软件: HAProxy的官网: https://www.haproxy.org/#down下载HAProxy的源码包. 安装: [ ...
FTP-工作原理及Vsftpd基础配置
废话不多说,先上图说明:上图介绍了FTP的工作原理及数据连接下的两种工作模式对比常见Server和Client Server:wu-ftpd,proftpd,pureftp,vsftpd(今天的主 ...
SpringMVC基础配置及使用
SpringMVC基础配置及使用 SpringMVC: 1.SpringMVC和Spring的关系: 软件开发的三层架构: web层[表示层.表现层]---->Service层----& ...

vue使用Framework7记录(一)：基础配置

vue使用Framework7记录(一)：基础配置相关推荐

最新文章

热门文章