Feat: Set Routes for application

Author: cwandev

package.json

@@ -9,12 +9,15 @@
   },
   "dependencies": {
     "@vant/touch-emulator": "^1.3.2",
+    "nprogress": "^0.2.0",
     "pinia": "^2.0.14",
     "vant": "^3.4.9",
     "vconsole": "^3.14.6",
-    "vue": "^3.2.25"
+    "vue": "^3.2.25",
+    "vue-router": "^4.0.15"
   },
   "devDependencies": {
+    "@types/nprogress": "^0.2.0",
     "@vitejs/plugin-vue": "^2.3.3",
     "less": "^4.1.2",
     "postcss-preset-env": "^7.6.0",

src/App.vue

@@ -1,21 +1,3 @@
-<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>
-  <img alt="Vue logo" src="./assets/logo.png" />
-  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
+  <router-view />
 </template>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>

src/assets/logo.png

@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import router from './router'
 import { createPinia } from 'pinia'
 
 // Vant 桌面端适配
@@ -16,7 +17,11 @@ const vConsole = new VConsole({ theme: 'dark' })
 // vite-plugin-vconsole 社区版
 // https://github.com/vadxq/vite-plugin-vconsole
 
-createApp(App)
+const app = createApp(App)
+
+app
+  .use(router)
   .use(createPinia())
   .use(Button)
-  .mount('#app')
+
+app.mount('#app')

src/components/HelloWorld.vue

@@ -0,0 +1,40 @@
+
+import { createRouter, createWebHistory } from 'vue-router'
+import NProgress from 'nprogress'
+import 'nprogress/nprogress.css'
+NProgress.configure({ showSpinner: true })
+
+// 导入路由组件
+import Dashboard from '../views/dashboard/analysis/index.vue'
+import Workplace from '../views/dashboard/workplace/index.vue'
+
+// 定义路由，每个路由都需要映射到一个组件
+const routes = [
+  {
+    path: '/',
+    name: 'dashboard',
+    component: Dashboard
+  }, {
+    path: '/workplace',
+    name: 'workplace',
+    component: Workplace
+  }
+]
+
+// 创建路由实例并传递 `routes` 配置
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+router.beforeEach((_to, _from, next) => {
+  NProgress.start(); // start progress bar
+  next()
+})
+
+router.afterEach(() => {
+  NProgress.done() // finish progress bar
+})
+
+// 导出路由实例，并在 `main.ts` 挂载
+export default router

src/main.ts

@@ -0,0 +1,26 @@
+<template>
+  <div class="container">
+    <img class="logo" src="../../../assets/logo.png" alt="logo" />
+    <router-link to="/workplace">进入工作区</router-link>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style lang="less" scoped>
+.container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+
+  .logo {
+    width: 80px;
+    height: 80px;
+  }
+}
+</style>

src/router/index.ts

@@ -0,0 +1,20 @@
+<template>
+  <div class="container">
+    工作区
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style lang="less" scoped>
+.container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+</style>

src/views/dashboard/analysis/index.vue

@@ -112,6 +112,11 @@
     estree-walker "^2.0.1"
     picomatch "^2.2.2"
 
+"@types/nprogress@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@types/nprogress/-/nprogress-0.2.0.tgz#86c593682d4199212a0509cc3c4d562bbbd6e45f"
+  integrity sha512-1cYJrqq9GezNFPsWTZpFut/d4CjpZqA0vhqDUPFWYKF1oIyBz5qnoYMzR+0C/T96t3ebLAC1SSnwrVOm5/j74A==
+
 "@vant/icons@^1.8.0":
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/@vant/icons/-/icons-1.8.0.tgz#36b13f2e628b533f6523a93a168cf02f07056674"
@@ -215,7 +220,7 @@
     "@vue/compiler-dom" "3.2.36"
     "@vue/shared" "3.2.36"
 
-"@vue/devtools-api@^6.1.4":
+"@vue/devtools-api@^6.0.0", "@vue/devtools-api@^6.1.4":
   version "6.1.4"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.1.4.tgz#b4aec2f4b4599e11ba774a50c67fa378c9824e53"
   integrity sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ==
@@ -739,6 +744,11 @@ normalize-range@^0.1.2:
   resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
   integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=
 
+nprogress@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
+  integrity sha1-y480xTIT2JVyP8urkH6UIq28r7E=
+
 object-assign@>=4.0.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
@@ -1222,6 +1232,13 @@ vue-demi@*:
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.12.5.tgz#8eeed566a7d86eb090209a11723f887d28aeb2d1"
   integrity sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==
 
+vue-router@^4.0.15:
+  version "4.0.15"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.15.tgz#b4a0661efe197f8c724e0f233308f8776e2c3667"
+  integrity sha512-xa+pIN9ZqORdIW1MkN2+d9Ui2pCM1b/UMgwYUCZOiFYHAvz/slKKBDha8DLrh5aCG/RibtrpyhKjKOZ85tYyWg==
+  dependencies:
+    "@vue/devtools-api" "^6.0.0"
+
 vue-tsc@^0.34.7:
   version "0.34.16"
   resolved "https://registry.yarnpkg.com/vue-tsc/-/vue-tsc-0.34.16.tgz#92cc8cc23bc3e979d44bc8ed9a318d46ee5201fa"