f7+vue测试页面，直接采用静态文件模式，因此不需要构建步骤，可以直接运行，商品图片来自淘宝，
更新：css, svg, js资源地址改为 jsdelivr ，framework7-vue也有网络资源了，推荐jsdelivr资源很全面，
问题：material-design-icon字体图标不显示，
项目地址：https://gitee.com/stumpx/f7-vue-shop-demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <title>f7-vue-shop</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/framework7@1.7.1/dist/css/framework7.material.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/framework7@1.7.1/dist/css/framework7.material.colors.css"> <link rel="stylesheet" type="image/svg+xml" href="https://cdn.jsdelivr.net/npm/@icon/framework7-icons@0.9.2/framework7-icons.svg"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@icon/framework7-icons@0.9.2/framework7-icons.css"> <link rel="stylesheet" type="image/svg+xml" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.svg"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.css"> <link rel="stylesheet" type="image/svg+xml" href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/MaterialIcons-Regular.svg"> <link rel="stylesheet" href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css"> <style> .navbar a.link i + i, .navbar a.link i + span, .navbar a.link span + i, .navbar a.link span + span, .subnavbar a.link i + i, .subnavbar a.link i + span, .subnavbar a.link span + i, .subnavbar a.link span + span, .toolbar a.link i + i, .toolbar a.link i + span, .toolbar a.link span + i, .toolbar a.link span + span { margin-left: 0; } .tabbar-labels { height: 64px; } .tabbar-labels.toolbar-bottom ~ .page-content { padding-bottom: 64px; } .tabbar-labels a.link, .tabbar-labels a.tab-link { padding-top: 9px; padding-bottom: 7px; } .navbar-inner { overflow: inherit; } .navbar-inner :not(.subnavbar) { overflow: hidden; } .subnavbar { height: 44px; margin-top: -1px; } .subnavbar a.link { line-height: 14px; font-size: 14px; height: 100%; } .navbar-fixed.with-subnavbar .page-content { padding-top: 105px !important; } </style> </head> <body> <div id="app"> <!-- Statusbar --> <f7-statusbar></f7-statusbar> <!-- Left Panel --> <f7-panel left reveal layout="dark"> <f7-view id="left-panel-view" navbar-through :dynamic-navbar="true"> <f7-pages> <f7-page> <f7-navbar title="Left Panel" sliding></f7-navbar> <f7-block inner> <p>Left panel content goes here</p> </f7-block> <f7-block-title>Load page in panel</f7-block-title> <f7-list> <f7-list-item link="/about/" title="About"></f7-list-item> <f7-list-item link="/form/" title="Form"></f7-list-item> </f7-list> <f7-block-title>Load page in main view</f7-block-title> <f7-list> <f7-list-item link="/about/" title="About" link-view="#main-view" link-close-panel></f7-list-item> <f7-list-item link="/form/" title="Form" link-view="#main-view" link-close-panel></f7-list-item> </f7-list> </f7-page> </f7-pages> </f7-view> </f7-panel> <!-- Right Panel --> <f7-panel right cover layout="dark"> <f7-view id="right-panel-view" navbar-through :dynamic-navbar="true"> <f7-pages> <f7-page> <f7-navbar title="Right Panel" sliding></f7-navbar> <f7-block> <p>Right panel content goes here</p> </f7-block> <f7-block-title>Load page in panel</f7-block-title> <f7-list> <f7-list-item link="/about/" title="About"></f7-list-item> <f7-list-item link="/form/" title="Form"></f7-list-item> </f7-list> <f7-block-title>Load page in main view</f7-block-title> <f7-list> <f7-list-item link="/about/" title="About" link-view="#main-view" link-close-panel></f7-list-item> <f7-list-item link="/form/" title="Form" link-view="#main-view" link-close-panel></f7-list-item> </f7-list> </f7-page> </f7-pages> </f7-view> </f7-panel> <!-- Main Views --> <f7-views theme="red"> <f7-view id="main-view" toolbar-through :dynamic-navbar="true" main> <!-- Pages --> <f7-pages> <page-home toolbar-through></page-home> </f7-pages> </f7-view> </f7-views> <!-- Popup --> <f7-popup id="popup"> <f7-view navbar-fixed> <f7-pages> <f7-page> <f7-navbar title="Popup"> <f7-nav-right> <f7-link close-popup>Close</f7-link> </f7-nav-right> </f7-navbar> <f7-block>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, architecto. Cupiditate laudantium rem nesciunt numquam, ipsam. Voluptates omnis, a inventore atque ratione aliquam. Omnis iusto nemo quos ullam obcaecati, quod.</f7-block> </f7-page> </f7-pages> </f7-view> </f7-popup> <!-- Login Screen --> <f7-login-screen id="login-screen"> <f7-view> <f7-pages> <f7-page login-screen> <f7-login-screen-title>Login</f7-login-screen-title> <f7-list form> <f7-list-item> <f7-label>Username</f7-label> <f7-input name="username" placeholder="Username" type="text"></f7-input> </f7-list-item> <f7-list-item> <f7-label>Password</f7-label> <f7-input name="password" type="password" placeholder="Password"></f7-input> </f7-list-item> </f7-list> <f7-list> <f7-list-button title="Sign In" close-login-screen></f7-list-button> <f7-list-label> <p>Click Sign In to close Login Screen</p> </f7-list-label> </f7-list> </f7-page> </f7-pages> </f7-view> </f7-login-screen> </div> <!-- toolbar Component Template --> <template id="com-toolbar"> <f7-toolbar bottom tabbar labels class="row no-gutter"> <f7-link icon-f7="home" :href="active == 'home'?'#':'/home/'" text="首页" class="col-auto" ignore-cache></f7-link> <f7-link icon-f7="search" :href="active == 'search'?'#':'/search/'" text="搜索" class="col-auto" ignore-cache></f7-link> <f7-link icon-f7="info" :href="active == 'center'?'#':'/center/'" text="我的" class="col-auto" ignore-cache></f7-link> </f7-toolbar> </template> <!-- center Page Template --> <template id="page-center"> <f7-page no-navbar name="center"> <f7-list media-list class="no-margin-v"> <ul class="no-border-v"> <li> <a href="/info/" class="item-link"> <div class="item-content"> <div class="item-media"> <!--<img src='img/info.png' style="max-80px;max-height:800px;border-radius:50%">--> <i class="icon fa fa-opencart bg-red color-white align-center" style="font-size: 36px; 60px;height: 60px;line-height: 60px;border-radius: 50%;"></i> </div> <div class="item-inner"> <div class="item-title">Title</div> <div class="item-title-row"> <div class="item-subtitle">Subtitle</div> </div> <div class="item-text">Describe</div> </div> </div> </a> </li> </ul> </f7-list> <f7-list class="no-margin-v"> <f7-list-item link="/cart/" title="购物车" badge="5" badge-color="red"></f7-list-item> <f7-list-item link="/order/" title="我的订单"></f7-list-item> <f7-list-item link="/order/type/1" title="待付款"></f7-list-item> <f7-list-item link="/order/type/2" title="待收货"></f7-list-item> <f7-list-item link="/order/type/3" title="待评价"></f7-list-item> <f7-list-item link="/msg/" title="我的消息" badge="5" badge-color="red"></f7-list-item> </f7-list> <com-toolbar :active="active"></com-toolbar> </f7-page> </template> <!-- search Page Template --> <template id="page-search"> <f7-page navbar-through hide-navbar-on-scroll with-subnavbar name="search"> <f7-navbar> <f7-nav-left> <f7-link> <f7-icon fa="opencart"></f7-icon> </f7-link> </f7-nav-left> <f7-searchbar cancel-link="Cancel" placeholder="搜索" search-list="#search-list" :clear="true" @searchbar:search="onSearch" @searchbar:enable="onEnable" @searchbar:disable="onDisable" @searchbar:clear="onClear"></f7-searchbar> <f7-nav-right> <f7-link> <f7-icon fa="shopping-cart"></f7-icon> </f7-link> </f7-nav-right> <f7-subnavbar sliding class="no-padding-h"> <f7-link>综合排序</f7-link> <f7-link>销量优先</f7-link> <f7-link> <f7-icon fa="filter"> 筛选</f7-icon> </f7-link> <f7-link v-if="showType == 'list'" @click.stop.prevent="showType = 'two'"> <f7-icon fa="th-list"></f7-icon> </f7-link> <f7-link v-if="showType == 'two'" @click.stop.prevent="showType = 'one'"> <f7-icon fa="th-large"></f7-icon> </f7-link> <f7-link v-if="showType == 'one'" @click.stop.prevent="showType = 'list'"> <f7-icon fa="square"></f7-icon> </f7-link> </f7-subnavbar> </f7-navbar> <f7-list class="searchbar-not-found"> <f7-list-item title="Nothing found"></f7-list-item> </f7-list> <f7-list v-if="showType == 'list'" media-list class="searchbar-found no-margin-v" id="search-list"> <ul class="no-border-v"> <li v-for="n in dataArr" :key="n"> <a href="/item/" class="item-link"> <div class="item-content"> <div class="item-media"> <img src='https://img.alicdn.com/bao/uploaded/i3/758626821/TB2QzRZXWryQeBjSszdXXaL.XXa_!!758626821.jpg_q50.jpg' style="max-60px;max-height:60px;"> </div> <div class="item-inner"> <div class="item-title-row"> <div class="item-title">产品名称{{n}}</div> </div> <div class="item-subtitle">￥123</div> <div class="item-text"> <f7-grid> <f7-col class="align-left">免运费</f7-col> <f7-col class="align-center">123人付款</f7-col> <f7-col class="align-right">上海</f7-col> </f7-grid> </div> </div> </div> </a> </li> </ul> </f7-list> <f7-block v-if="showType == 'two'" class="no-padding-h no-margin-v" style="margin-bottom:-5px;"> <f7-grid> <f7-card v-for="n in dataArr" :key="n" class="col-50 no-margin-top no-margin-h" style=" calc((100% - 35px*1)/ 2);margin-bottom:10px"> <f7-card-header class="no-border align-bottom eq-w-h" style="background-image:url(https://img.alicdn.com/bao/uploaded/i3/758626821/TB2QzRZXWryQeBjSszdXXaL.XXa_!!758626821.jpg_q50.jpg);background-size:cover;padding-bottom:50%;"></f7-card-header> <f7-card-footer class="no-padding-v">产品名称{{n}}</f7-card-footer> </f7-card> </f7-grid> </f7-block> <f7-block v-if="showType == 'one'" class="no-padding-h no-margin-v" style="margin-bottom:-5px;"> <f7-grid> <f7-card v-for="n in dataArr" class="col-100 no-margin-top no-margin-h" style=" calc((100% - 35px*0)/ 1);margin-bottom:10px"> <f7-card-header class="no-border align-bottom eq-w-h" style="background-image:url(https://img.alicdn.com/bao/uploaded/i3/758626821/TB2QzRZXWryQeBjSszdXXaL.XXa_!!758626821.jpg_q50.jpg);background-size:cover;padding-bottom:50%;"></f7-card-header> <f7-card-footer class="no-padding-v">产品名称{{n}}</f7-card-footer> </f7-card> </f7-grid> </f7-block> <com-toolbar :active="active"></com-toolbar> </f7-page> </template> <!-- home Page Template --> <template id="page-home"> <f7-page navbar-through name="home"> <f7-navbar> <f7-nav-left> <f7-link href="/index/"> <f7-icon fa="opencart"></f7-icon> </f7-link> </f7-nav-left> <f7-searchbar cancel-link="Cancel" placeholder="搜索" :clear="true"></f7-searchbar> <f7-nav-right> <f7-link> <f7-icon fa="shopping-cart"></f7-icon> </f7-link> </f7-nav-right> </f7-navbar> <f7-swiper init pagination :params="{autoplay:true, loop:true, speed:2500, spaceBetween: 1, autoplayDisableOnInteraction: false}" style="min-height:100px;"> <f7-swiper-slide v-for="n in 5" :key="n"><img src="https://gw.alicdn.com/imgextra/TB237WpbQfb_uJkHFCcXXXagFXa_!!181-0-lubanu.jpg_q50.jpg" :title="n" style="100%;height:130px;background:lightgray"/></f7-swiper-slide> </f7-swiper> <f7-block-title class="row no-margin-top"> <span>热卖</span> <f7-link href="search/type/1">更多>></f7-link> </f7-block-title> <f7-block class="no-padding-h" style="margin-bottom:-5px;"> <f7-grid> <f7-card v-for="n in 6" :key="n" class="col-50 no-margin-top no-margin-h" style=" calc((100% - 35px*1)/ 2);margin-bottom:10px"> <f7-card-header class="no-border align-bottom eq-w-h" style="background-image:url(https://img.alicdn.com/bao/uploaded/i3/758626821/TB2QzRZXWryQeBjSszdXXaL.XXa_!!758626821.jpg_q50.jpg);background-size:cover;padding-bottom:50%;"></f7-card-header> <f7-card-footer class="no-padding-v">产品名称{{n}}</f7-card-footer> </f7-card> </f7-grid> </f7-block> <f7-block-title class="no-padding-top row"> <span>推荐</span> <f7-link href="search/type/1">更多>></f7-link> </f7-block-title> <f7-block class="no-padding-h no-margin-bottom"> <f7-grid> <f7-card v-for="n in 3" :key="n" class="col-33 no-margin-top no-margin-h" style=" calc((100% - 35px*2)/ 3);margin-bottom:10px"> <f7-card-header class="no-border align-bottom eq-w-h" style="background-image:url(https://img.alicdn.com/bao/uploaded/i3/758626821/TB2QzRZXWryQeBjSszdXXaL.XXa_!!758626821.jpg_q50.jpg);background-size:cover;padding-bottom:50%;"></f7-card-header> <f7-card-footer class="no-padding-v">产品名称{{n}}</f7-card-footer> </f7-card> </f7-grid> </f7-grid> </f7-block> <com-toolbar :active="active"></com-toolbar> </f7-page> </template> <script src="https://cdn.jsdelivr.net/npm/framework7@1.6.5/dist/js/framework7.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/framework7-vue@0.9.2/dist/framework7-vue.js"></script> <script> // Init F7 Vue Plugin Vue.use(Framework7Vue) // Init Page Components Vue.component('com-toolbar', { props: ['active'], template: '#com-toolbar' }) Vue.component('page-center', { template: '#page-center', data: function () { return { active: 'center' }; } }) Vue.component('page-search', { template: '#page-search', data: function () { var arr = []; for (var i = 0; i < 20; i++) arr.push(i + 1); return { dataArr: arr, showType: 'list', active: 'search' }; }, methods: { onSearch: function (query, found) { console.log('search', query); }, onClear: function (event) { console.log('clear'); }, onEnable: function (event) { console.log('enable'); }, onDisable: function (event) { console.log('disable'); }, } }) Vue.component('page-home', { template: '#page-home', data: function () { return { active: 'home' }; } }) // Init App var app = new Vue({ el: '#app', // Init Framework7 by passing parameters here framework7: { root: '#app', /* Uncomment to enable Material theme: */ material: true, modalTitle: '', modalButtonOk: '确认', modalButtonCancel: '取消', modalPreloaderTitle: '加载中...', cache: false, domCache: false, pushState: true, swipePanel: 'left', swipeBackPage: false, swipePanelThreshold: 15, smartSelectBackText: '返回', smartSelectPickerCloseText: '完成', smartSelectPopupCloseText: '关闭', swipePanelOnlyClose: true, preloadPreviousPage: false, uniqueHistory: false, routes: [{ path: '/center/', component: 'page-center' }, { path: '/search/', component: 'page-search' }, { path: '/search/type/:typeId/', component: 'page-search' }, { path: '/home/', component: 'page-home' } ], } }); </script> </body> </html>