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

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

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);

2. 配置路由文件，在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 promise
            const vueComponent = () => import('./../components/ActionSheet.vue');
            // resolve promise
            vueComponent().then((vc) => {
                // resolve with component
                resolve({ 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了。

如有问题，欢迎留言。