refactor: 新增页面路由

docs/设计思路.md

@@ -0,0 +1,14 @@
+1 主要页面
+
+发布页面
+
+发布设置
+
+平台开关
+
+平台管理
+
+图床管理
+
+偏好设置
+

package.json

@@ -1,7 +1,7 @@
 {
   "name": "sy-post-publisher",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.8.1",
   "type": "module",
   "scripts": {
     "serve": "vite",
@@ -12,7 +12,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.2.47"
+    "vue": "^3.2.47",
+    "vue-router": "4"
   },
   "devDependencies": {
     "@terwer/eslint-config-custom": "^1.2.0",

src/App.vue

@@ -25,13 +25,6 @@
 
 <script setup lang="ts">
 import HelloWorld from "./components/HelloWorld.vue"
-import { onMounted } from "vue"
-import VConsole from "vconsole"
-import {isDev} from "./utils/constants.ts";
-
-onMounted(() => {
-
-})
 </script>
 
 <template>
@@ -44,6 +37,17 @@ onMounted(() => {
     </a>
   </div>
   <HelloWorld msg="Vite + Vue" />
+
+  <p>
+    <!--使用 router-link 组件进行导航 -->
+    <!--通过传递 `to` 来指定链接 -->
+    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
+    <router-link to="/">Go to Home</router-link>
+    <router-link to="/about">Go to About</router-link>
+  </p>
+  <!-- 路由出口 -->
+  <!-- 路由匹配到的组件将渲染在这里 -->
+  <router-view></router-view>
 </template>
 
 <style scoped>

src/composables/useRouter.ts

@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) 2023, Terwer . All rights reserved.
+ * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
+ *
+ * This code is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License version 2 only, as
+ * published by the Free Software Foundation.  Terwer designates this
+ * particular file as subject to the "Classpath" exception as provided
+ * by Terwer in the LICENSE file that accompanied this code.
+ *
+ * This code is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
+ * version 2 for more details (a copy is included in the LICENSE file that
+ * accompanied this code).
+ *
+ * You should have received a copy of the GNU General Public License version
+ * 2 along with this work; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
+ *
+ * Please contact Terwer, Shenzhen, Guangdong, China, youweics@163.com
+ * or visit www.terwer.space if you need additional information or have any
+ * questions.
+ */
+
+import { createRouter, createWebHashHistory, Router, RouteRecordRaw } from "vue-router"
+import Home from "~/src/views/Home.vue"
+import About from "~/src/views/About.vue"
+
+const routes: RouteRecordRaw[] = [
+  { path: "/", component: Home },
+  { path: "/about", component: About },
+]
+
+export const useRouter = (): Router => {
+  return createRouter({
+    history: createWebHashHistory(),
+    routes,
+  })
+}

src/main.ts

@@ -27,6 +27,7 @@ import { createApp } from "vue"
 import "./style.css"
 import App from "./App.vue"
 import { createLogger } from "./utils/simple-logger.ts"
+import { useRouter } from "./composables/useRouter.ts"
 
 /**
  * 初始化 Vue 实例
@@ -36,6 +37,10 @@ import { createLogger } from "./utils/simple-logger.ts"
 
   const app = createApp(App)
 
+  // router
+  const router = useRouter()
+  app.use(router)
+
   app.mount("#app")
   logger.info("app mounted")
 })()

src/views/About.vue

@@ -0,0 +1,32 @@
+<!--
+  - Copyright (c) 2023, Terwer . All rights reserved.
+  - DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
+  -
+  - This code is free software; you can redistribute it and/or modify it
+  - under the terms of the GNU General Public License version 2 only, as
+  - published by the Free Software Foundation.  Terwer designates this
+  - particular file as subject to the "Classpath" exception as provided
+  - by Terwer in the LICENSE file that accompanied this code.
+  -
+  - This code is distributed in the hope that it will be useful, but WITHOUT
+  - ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  - FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
+  - version 2 for more details (a copy is included in the LICENSE file that
+  - accompanied this code).
+  -
+  - You should have received a copy of the GNU General Public License version
+  - 2 along with this work; if not, write to the Free Software Foundation,
+  - Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
+  -
+  - Please contact Terwer, Shenzhen, Guangdong, China, youweics@163.com
+  - or visit www.terwer.space if you need additional information or have any
+  - questions.
+  -->
+
+<script setup lang="ts"></script>
+
+<template>
+  <div>About</div>
+</template>
+
+<style scoped></style>

src/views/Home.vue

@@ -0,0 +1,32 @@
+<!--
+  - Copyright (c) 2023, Terwer . All rights reserved.
+  - DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
+  -
+  - This code is free software; you can redistribute it and/or modify it
+  - under the terms of the GNU General Public License version 2 only, as
+  - published by the Free Software Foundation.  Terwer designates this
+  - particular file as subject to the "Classpath" exception as provided
+  - by Terwer in the LICENSE file that accompanied this code.
+  -
+  - This code is distributed in the hope that it will be useful, but WITHOUT
+  - ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  - FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
+  - version 2 for more details (a copy is included in the LICENSE file that
+  - accompanied this code).
+  -
+  - You should have received a copy of the GNU General Public License version
+  - 2 along with this work; if not, write to the Free Software Foundation,
+  - Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
+  -
+  - Please contact Terwer, Shenzhen, Guangdong, China, youweics@163.com
+  - or visit www.terwer.space if you need additional information or have any
+  - questions.
+  -->
+
+<script setup lang="ts"></script>
+
+<template>
+  <div>Home</div>
+</template>
+
+<style scoped></style>

tsconfig.json

@@ -20,7 +20,11 @@
     "noUnusedParameters": false,
     "noFallthroughCasesInSwitch": true,
 
-    "types": ["node", "vite/client"]
+    "types": ["node", "vite/client"],
+
+    "paths": {
+      "~/*": ["./*"]
+    }
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
   "references": [{ "path": "./tsconfig.node.json" }]

vite.config.ts

@@ -4,6 +4,7 @@ import livereload from "rollup-plugin-livereload"
 import minimist from "minimist"
 import fg from "fast-glob"
 import { createHtmlPlugin } from "vite-plugin-html"
+import path from "path"
 
 const args = minimist(process.argv.slice(2))
 const isWatch = args.watch || args.w || false
@@ -64,6 +65,12 @@ export default defineConfig({
     "process.env.DEV_MODE": `"${isWatch}"`,
   },
 
+  resolve: {
+    alias: {
+      "~": path.resolve(__dirname, "./"),
+    },
+  },
+
   build: {
     // 输出路径
     outDir: distDir,