update

Former-commit-id: eb673cdef01ddcb3eba167a5cebc1c5688544b27

projects/IoTCenter/wwwroot/css/app.css

@@ -0,0 +1,2 @@
+body {
+}

projects/IoTCenter/wwwroot/js/app.js

@@ -0,0 +1,47 @@
+var app;
+Vue.component('page-not-found', {
+    template: '#page-not-found',
+    created: function () {
+        alert('404');
+    }
+});
+new Vue({
+    // App Root Element
+    el: '#app',
+
+    // App root data
+    data() {
+        return {
+            f7params: {
+                root: '#app',
+                theme: 'ios',
+                routes: [
+                    {
+                        path: '/home/',
+                        component: 'home'
+                    },
+                    {
+                        path: '/url1/',
+                        component: 'foo'
+                    },
+                    {
+                        path: '/url2/',
+                        component: 'bar'
+                    },
+                    {
+                        path: '(.*)',
+                        component: 'page-not-found',
+                    }
+                ]
+            }
+        };
+    },
+    mounted() {
+        this.$f7ready((f7) => {
+            app = this.$f7;
+        });
+    },
+    methods: {
+
+    }
+});

projects/IoTCenter/wwwroot/test.c1.html

@@ -1 +1,9 @@
-<div>foo {{count}}</div>
+<template>
+    <f7-page name="foo">
+        <f7-navbar title="Foo" back-link="Back"></f7-navbar>
+        <f7-block-title>{{count}}</f7-block-title>
+        <f7-block strong>
+            <p>1</p>
+        </f7-block>
+    </f7-page>
+</template>

projects/IoTCenter/wwwroot/test.c1.js

@@ -1,15 +1,4 @@
-//const Foo = Vue.component('fool', {
-//    template: '<div>foo {{count}}</div>',
-//    data() {
-//        return {
-//            count: 123
-//        };
-//    },
-//    created: function () {
-//        alert('created');
-//    }
-//});
-const Foo = Vue.component('fool', function (resolve, reject) {
+Vue.component('foo', function (resolve, reject) {
     // 可以请求一个html文件，既然存放模板还是html文件存放比较好
     $.get("./test.c1.html").then(function (res) {
         resolve({
@@ -20,7 +9,7 @@ const Foo = Vue.component('fool', function (resolve, reject) {
                 };
             },
             created: function () {
-                alert('created');
+                //alert('created');
             }
         })
     });

projects/IoTCenter/wwwroot/test.c2.html

@@ -0,0 +1,9 @@
+<template>
+    <f7-page name="bar">
+        <f7-navbar title="Bar" back-link="Back"></f7-navbar>
+        <f7-block-title>{{count}}</f7-block-title>
+        <f7-block strong>
+            <p>2</p>
+        </f7-block>
+    </f7-page>
+</template>

projects/IoTCenter/wwwroot/test.c2.js

@@ -1 +1,16 @@
-const Bar = { template: '<div>bar</div>' }
+Vue.component('bar', function (resolve, reject) {
+    // 可以请求一个html文件，既然存放模板还是html文件存放比较好
+    $.get("./test.c2.html").then(function (res) {
+        resolve({
+            template: res,
+            data() {
+                return {
+                    count: 465
+                };
+            },
+            created: function () {
+                //alert('created');
+            }
+        })
+    });
+});

projects/IoTCenter/wwwroot/test.home.html

@@ -0,0 +1,9 @@
+<template>
+    <f7-page name="home">
+        <f7-navbar title="Home" />
+        <f7-list>
+            <f7-list-item link="/url1/" title="fool"></f7-list-item>
+            <f7-list-item link="/url2/" title="bar"></f7-list-item>
+        </f7-list>
+    </f7-page>
+</template>

projects/IoTCenter/wwwroot/test.home.js

@@ -0,0 +1,16 @@
+Vue.component('home', function (resolve, reject) {
+    // 可以请求一个html文件，既然存放模板还是html文件存放比较好
+    $.get("./test.home.html").then(function (res) {
+        resolve({
+            template: res,
+            data() {
+                return {
+                    count: 123
+                };
+            },
+            created: function () {
+                console.log('created');
+            }
+        })
+    });
+});

projects/IoTCenter/wwwroot/test.html

@@ -1,42 +1,40 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <meta charset="utf-8" />
-    <title></title>
+    <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, viewport-fit=cover">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <link rel="stylesheet" href="lib/framework7/css/framework7.bundle.min.css">
+    <link rel="stylesheet" href="css/framework7-icons.css">
+    <link rel="stylesheet" href="css/app.css">
 </head>
 <body>
     <div id="app">
-        <h1>Hello App!</h1>
-        <p>
-            <!-- 使用 router-link 组件来导航. -->
-            <!-- 通过传入 `to` 属性指定链接. -->
-            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
-            <router-link to="/foo">Go to Foo</router-link>
-            <router-link to="/bar">Go to Bar</router-link>
-        </p>
-        <!-- 路由出口 -->
-        <!-- 路由匹配到的组件将渲染在这里 -->
-        <router-view></router-view>
+        <f7-app :params="f7params">
+            <f7-statusbar></f7-statusbar>
+            <f7-view id="main-view" url="/home/" main class="safe-areas">
+            </f7-view>
+        </f7-app>
     </div>
+    <template id="page-not-found">
+        <f7-page>
+            <f7-navbar title="404" back-link="Back"></f7-navbar>
+            <f7-block strong>
+                <p>无法找到该网页.</p>
+            </f7-block>
+        </f7-page>
+    </template>
     <script src="lib/jquery/jquery.min.js"></script>
+    <script src="lib/framework7/js/framework7.bundle.min.js"></script>
     <script src="lib/vue/vue.min.js"></script>
+    <script src="lib/framework7/js/framework7-vue.bundle.min.js"></script>
     <script src="lib/vue-router/vue-router.min.js"></script>
-    <script type="text/javascript" src="test.c1.js"></script>
-    <script type="text/javascript" src="test.c2.js"></script>
     <script>
-
-        const routes = [
-            { path: '/foo', component: Foo },
-            { path: '/bar', component: Bar }
-        ]
-
-        const router = new VueRouter({
-            routes
-        })
-
-        const app = new Vue({
-            router
-        }).$mount('#app')
+        Framework7.use(Framework7Vue);
     </script>
+    <script type="text/javascript" src="test.home.js"></script>
+    <script type="text/javascript" src="test.c1.js"></script>
+    <script type="text/javascript" src="test.c2.js"></script>
+    <script type="text/javascript" src="js/app.js"></script>
 </body>
 </html>