创建了web窗口框架

831f08bf · 62f3568c7066201db17ad50a · 10fda59a · 831f08bf · 831f08bf · 831f08bf
7 changed file
--- a/web/index.html
+++ b/web/index.html
@@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue + TS</title>
+    <title>Vite + Vue + TS + HMS</title>
  </head>
  <body>
    <div id="app"></div>

--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -8,7 +8,8 @@
      "name": "web",
      "version": "0.0.0",
      "dependencies": {
-        "vue": "^3.2.41"
+        "vue": "^3.2.41",
+        "vue-router": "^4.1.6"
      },
      "devDependencies": {
        "@vitejs/plugin-vue": "^3.2.0",
@@ -174,6 +175,11 @@
        "@vue/shared": "3.2.45"
      }
    },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.4.5",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.4.5.tgz",
+      "integrity": "sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ=="
+    },
    "node_modules/@vue/reactivity": {
      "version": "3.2.45",
      "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.2.45.tgz",
@@ -862,6 +868,17 @@
        "@vue/shared": "3.2.45"
      }
    },
+    "node_modules/vue-router": {
+      "version": "4.1.6",
+      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.1.6.tgz",
+      "integrity": "sha512-DYWYwsG6xNPmLq/FmZn8Ip+qrhFEzA14EI12MsMgVxvHFDYvlr4NXpVF5hrRH1wVcDP8fGi5F4rxuJSl8/r+EQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.4.5"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
    "node_modules/vue-template-compiler": {
      "version": "2.7.14",
      "resolved": "https://registry.npmmirror.com/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz",
@@ -1017,6 +1034,11 @@
        "@vue/shared": "3.2.45"
      }
    },
+    "@vue/devtools-api": {
+      "version": "6.4.5",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.4.5.tgz",
+      "integrity": "sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ=="
+    },
    "@vue/reactivity": {
      "version": "3.2.45",
      "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.2.45.tgz",
@@ -1429,6 +1451,14 @@
        "@vue/shared": "3.2.45"
      }
    },
+    "vue-router": {
+      "version": "4.1.6",
+      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.1.6.tgz",
+      "integrity": "sha512-DYWYwsG6xNPmLq/FmZn8Ip+qrhFEzA14EI12MsMgVxvHFDYvlr4NXpVF5hrRH1wVcDP8fGi5F4rxuJSl8/r+EQ==",
+      "requires": {
+        "@vue/devtools-api": "^6.4.5"
+      }
+    },
    "vue-template-compiler": {
      "version": "2.7.14",
      "resolved": "https://registry.npmmirror.com/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz",

--- a/web/package.json
+++ b/web/package.json
@@ -9,7 +9,8 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "vue": "^3.2.41"
+    "vue": "^3.2.41",
+    "vue-router": "^4.1.6"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.2.0",
@@ -17,4 +18,4 @@
    "vite": "^3.2.3",
    "vue-tsc": "^1.0.9"
  }
-}
\ No newline at end of file
+}
--- a/web/src/App.vue
+++ b/web/src/App.vue
 <script setup lang="ts">
 // This starter template is using Vue 3 <script setup> SFCs
 // Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
-import HelloWorld from './components/HelloWorld.vue'
 </script>

 <template>
-  <div>
-    <a href="https://vitejs.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
+  <div class="window-box">
+    <div class="window-header"></div>
+    <router-view></router-view>
  </div>
-  <HelloWorld msg="Vite + Vue" />
 </template>

 <style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
+.window-box {
+  background-color: rgb(206, 231, 178);
+  width: 1200px;
+  height: 720px;
+  border-radius: 5px;
+  border: 1px solid whitesmoke;
 }
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
+
+.window-header {
+  width: 100%;
+  height: 20px;
+  background-color: bisque;
+  border-radius: 5px 5px 0px 0px;
 }
-</style>
+</style>
\ No newline at end of file
--- a/web/src/components/HelloWorld.vue
+++ b/web/src/components/HelloWorld.vue
@@ -7,32 +7,50 @@ const count = ref(0)
 </script>

 <template>
-  <h1>{{ msg }}</h1>
+  <div>
+    <div>
+    <a href="https://vitejs.dev" target="_blank">
+      <img src="/vite.svg" class="logo" alt="Vite logo" />
+    </a>
+  </div>
+  <h1> Vue + Vite + Ts</h1>
+    <h1>{{ msg }}</h1>
+
+    <div class="card">
+      <button type="button" @click="count++">count is {{ count }}</button>
+      <p>
+        Edit
+        <code>components/HelloWorld.vue</code> to test HMR
+      </p>
+    </div>

-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
+      Check out
+      <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the official Vue + Vite
+      starter
+    </p>
+    <p>
+      Install
+      <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+      in your IDE for a better DX
    </p>
+    <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Install
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
-    in your IDE for a better DX
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
 </template>

 <style scoped>
 .read-the-docs {
  color: #888;
 }
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vue:hover {
+  filter: drop-shadow(0 0 2em #42b883aa);
+}
 </style>
--- a/web/src/main.ts
+++ b/web/src/main.ts
 import { createApp } from 'vue'
+import router from './router/index'
 import './style.css'
 import App from './App.vue'

-createApp(App).mount('#app')
+const app = createApp(App)
+app.use(router)
+app.mount('#app')
--- a/web/src/router/index.ts
+++ b/web/src/router/index.ts
+import {createRouter, createWebHashHistory} from 'vue-router'
+const routes = [
+   {
+       path: '/',
+       redirect: '/home',
+   },
+   {
+       path: '/home',
+       component: () => import('../components/HelloWorld.vue')
+   }
+]
+
+const router = createRouter({
+   history: createWebHashHistory(), 
+   routes
+})
+export default router