add router

package.json

@@ -3,7 +3,8 @@
   "version": "0.0.0",
   "private": "true",
   "scripts": {
-    "dev": "vite",
+    "start": "vite",
+    "dev": "vite --force",
     "build": "vue-tsc --noEmit && vite build",
     "serve": "vite preview"
   },
@@ -12,7 +13,8 @@
     "axios-progress-bar": "^1.2.0",
     "axios-retry": "^3.1.9",
     "lodash-es": "^4.17.21",
-    "vue": "^3.0.5"
+    "vue": "^3.0.5",
+    "vue-router": "4"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.4",

src/App.vue

@@ -1,7 +1,5 @@
 <template>
-  <TestStore />
-  <TestStatus />
-  <TestSetting />
+  <router-view />
 </template>
 
 <script lang="ts">

src/components/mark/Mark.vue

@@ -0,0 +1,45 @@
+<template>
+  <h1>展示新前端获取setting的结果</h1>
+  <div>
+    setting:
+    <pre> {{ store.setting }}</pre>
+  </div>
+</template>
+
+<script lang="ts">
+import { reactive, defineComponent, onMounted, toRefs } from "vue";
+import { getSetting } from "@/api/markPage";
+import { store } from "@/store";
+
+export default defineComponent({
+  name: "Mark",
+  setup: () => {
+    async function updateSetting() {
+      const settingRes = await getSetting();
+      store.setting = settingRes.data;
+    }
+    onMounted(() => {
+      updateSetting();
+    });
+    return { store };
+  },
+});
+</script>
+
+<style scoped>
+a {
+  color: #42b983;
+}
+
+label {
+  margin: 0 0.5em;
+  font-weight: bold;
+}
+
+code {
+  background-color: #eee;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: #304455;
+}
+</style>

src/main.ts

@@ -2,13 +2,14 @@ import { initLogin } from "./devLogin";
 import "./styles/global.css";
 import { createApp } from "vue";
 import App from "./App.vue";
+import router from "@/router";
 
 // if(process.env.NODE_ENV)
 // console.log(import.meta.env.DEV);
 if (import.meta.env.DEV) {
   initLogin().then(() => {
-    createApp(App).mount("#app");
+    createApp(App).use(router).mount("#app");
   });
 } else {
-  createApp(App).mount("#app");
+  createApp(App).use(router).mount("#app");
 }

src/router/index.ts

@@ -0,0 +1,18 @@
+import { createRouter, createWebHistory } from "vue-router";
+import Mark from "@/components/mark/Mark.vue";
+
+const routes = [
+  { path: "/", component: Mark },
+  { path: "/mark", component: Mark },
+];
+
+// 3. Create the router instance and pass the `routes` option
+// You can pass in additional options here, but let's
+// keep it simple for now.
+const router = createRouter({
+  // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
+  history: createWebHistory(),
+  routes, // short for `routes: routes`
+});
+
+export default router;

yarn.lock

@@ -647,6 +647,11 @@ vite@^2.1.0:
   optionalDependencies:
     fsevents "~2.3.1"
 
+vue-router@4:
+  version "4.0.5"
+  resolved "https://registry.npm.taobao.org/vue-router/download/vue-router-4.0.5.tgz?cache=0&sync_timestamp=1615477493682&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-4.0.5.tgz#dd0a4134bc950c37aef64b973e9ee1008428d8fa"
+  integrity sha1-3QpBNLyVDDeu9kuXPp7hAIQo2Po=
+
 vue-tsc@^0.0.8:
   version "0.0.8"
   resolved "https://registry.npm.taobao.org/vue-tsc/download/vue-tsc-0.0.8.tgz#2b2912d0c11e0d7bfd8d4ea89883c5acd722ac39"