add vue router to project

4xmen · Mar 19, 2023 · 89705b1 · 89705b1
1 parent 1b02050
commit 89705b1
Show file tree

Hide file tree

Showing 9 changed files with 132 additions and 29 deletions.
diff --git a/anubias2/index.html b/anubias2/index.html
@@ -2,13 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="icon" type="image/x-icon" href="public/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
     <title>Anubias</title>
   </head>
   <body>
     <div id="anubias-app"></div>
-    <script type="module" src="/src/main.ts"></script>
+    <script type="module" src="src/main.ts"></script>
   </body>
 </html>
diff --git a/anubias2/package.json b/anubias2/package.json
@@ -51,6 +51,7 @@
   "dependencies": {
     "remixicon": "^2.5.0",
     "vazirmatn": "^33.0.3",
+    "vue-router": "^4.1.6",
     "vuex": "^4.0.2"
   }
 }
diff --git a/anubias2/src/app.vue b/anubias2/src/app.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "app"
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/anubias2/src/ide/router.ts b/anubias2/src/ide/router.ts
@@ -0,0 +1,17 @@
+import anubias from './views/anubias.vue';
+import { Component } from 'vue';
+
+function view(name: string): Component {
+    return () => import(`./views/${name}.vue`);
+}
+
+const routes = [
+    { path: '/', component: anubias },
+    {
+        path: '/settings',
+        name: 'Settings',
+        component: view('settings'),
+    }
+];
+
+export  default  routes;
diff --git a/anubias2/src/Anubias.vue → anubias2/src/ide/views/anubias.vue b/anubias2/src/Anubias.vue → anubias2/src/ide/views/anubias.vue
@@ -7,6 +7,7 @@
       <div class="tab">
         <i class="ri-close-line close"></i>
         Other tab sample
+
       </div>
     </div>
     <div id="buttons">
@@ -37,6 +38,9 @@
       <div class="grid">
         <div class="side">
           <div id="non-visual-component">
+            <router-link to="/settings">
+              go setting test
+            </router-link>
           </div>
         </div>
         <div id="device-container">
@@ -79,12 +83,12 @@
 <script>
 import {mapActions} from 'vuex';
 import {mapState} from 'vuex';
-import buttons from "./ide/components/buttons.vue";
-import iconButton from "./ide/components/iconButton.vue";
-import device from "./ide/components/device.vue";
+import buttons from "../components/buttons.vue";
+import iconButton from "../components/iconButton.vue";
+import device from "../components/device.vue";
 
 export default {
-  name: "Anubias",
+  name: "anubias",
   components: {buttons, iconButton, device},
   data: () => {
     return {

diff --git a/anubias2/src/ide/views/settings.vue b/anubias2/src/ide/views/settings.vue
@@ -0,0 +1,18 @@
+<template>
+  <h1>
+    Setting
+  </h1>
+  <router-link to="/">
+    Back
+  </router-link>
+</template>
+
+<script>
+export default {
+  name: "settings"
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/anubias2/src/main.ts b/anubias2/src/main.ts
@@ -1,13 +1,23 @@
 import {createApp} from 'vue';
+import { createWebHistory, createRouter } from "vue-router";
+
 import "./css";
-import App from './Anubias.vue';
+import App from './app.vue';
 import './samples/node-api';
 import store from './stores/store';
+import routes from "./ide/router";
+
 
+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`
+});
 
 const app = createApp(App);
 
 app.use(store);
+app.use(router);
 
 app.mount('#anubias-app').$nextTick(() => {
         postMessage({payload: 'removeLoading'}, '*');

diff --git a/anubias2/src/style.css b/anubias2/src/style.css
@@ -9,8 +9,8 @@
     --def-bg: #282c34;
     --darker-bg: #21252b;
     --lighter-bg: #353a45;
-    --scrollbarbg:  #21252b80;
-    --scrollbar:  #353a4560;
+    --scrollbarbg: #21252b80;
+    --scrollbar: #353a4560;
 
     --transition-duration: 500ms;
 
@@ -40,15 +40,15 @@
     background: var(--darker-bg);
 }
 
-*{
+* {
     padding: 0;
     margin: 0;
     border-spacing: 0;
     box-sizing: border-box;
 }
 
 
-select{
+select {
     background: transparent;
     color: var(--text-color);
     border: transparent;
@@ -60,11 +60,11 @@ select{
     font-size: 16px;
 }
 
-select:focus{
+select:focus {
     border-bottom: 1px solid var(--text-color);
 }
 
-select option{
+select option {
     background: var(--darker-bg);
     font-size: 16px;
 }
@@ -80,23 +80,27 @@ select option{
     grid-column: 1 / 20;
     grid-row: 1;
 }
+
 #buttons {
     grid-column: 1 / 20;
     grid-row: 2;
     background: var(--darker-bg);
 }
-#components{
+
+#components {
     background: var(--darker-bg);
     grid-column: 16 / 20;
     grid-row: 3;
     border: 1px solid var(--lighter-bg);
     overflow: hidden;
     position: relative;
 }
+
 #components #components-available.list {
     padding: 4px;
 }
-#properties{
+
+#properties {
     background: var(--darker-bg);
     grid-column: 16 / 20;
     grid-row: 4;
@@ -106,10 +110,11 @@ select option{
     position: relative;
 }
 
-#properties.collapsed,#components.collapsed{
+#properties.collapsed, #components.collapsed {
     grid-column: 19 / 20;
 }
-#properties.collapsed h3,#components.collapsed h3{
+
+#properties.collapsed h3, #components.collapsed h3 {
     position: absolute;
     left: 0;
     right: 0;
@@ -118,36 +123,43 @@ select option{
     background: var(--darker-bg);
     cursor: pointer;
 }
-#properties.collapsed h3 span,#components.collapsed h3 span{
+
+#properties.collapsed h3 span, #components.collapsed h3 span {
     transform: rotateZ(90deg);
     display: block;
     padding: 2px 7px;
 }
-#properties.collapsed h3 i, #components.collapsed h3 i{
+
+#properties.collapsed h3 i, #components.collapsed h3 i {
     display: none;
 }
-#main{
+
+#main {
     grid-column: 1 / 16;
     grid-row: 3 / 5;
 }
-#pages{
+
+#pages {
     background: var(--darker-bg);
     grid-column: 1 / 20;
     grid-row: 5;
     border: 1px solid var(--lighter-bg);
     border-bottom: 0;
 }
+
 #pages.collapsed {
 }
-#pages.collapsed h3{
+
+#pages.collapsed h3 {
     background: var(--darker-bg);
     cursor: pointer;
 }
-#pages.collapsed i{
+
+#pages.collapsed i {
     display: none;
 }
 
-.r90deg{
+.r90deg {
     transform: rotateZ(90deg);
 }
 
@@ -162,6 +174,15 @@ select option{
     border-bottom: 0;
 }
 
-.collapsed .sub-panel{
+.collapsed .sub-panel {
     display: none;
+}
+
+a, a:hover {
+    color: var(--text-color);
+    text-decoration: none;
+}
+
+a:hover, a:visited:hover {
+    color: var(--text-hilight);
 }
diff --git a/anubias2/vite.config.ts b/anubias2/vite.config.ts
@@ -4,7 +4,7 @@ import vue from '@vitejs/plugin-vue'
 import electron from 'vite-plugin-electron'
 import renderer from 'vite-plugin-electron-renderer'
 import pkg from './package.json'
-
+import path from 'path';
 // https://vitejs.dev/config/
 export default defineConfig(({ command }) => {
   rmSync('dist-electron', { recursive: true, force: true })
@@ -36,12 +36,20 @@ export default defineConfig(({ command }) => {
                 external: Object.keys('dependencies' in pkg ? pkg.dependencies : {}),
               },
             },
+            // Add the `resolve` field here
+            resolve: {
+              // Define your aliases here
+              alias: {
+                '@': path.resolve(__dirname, './src'),
+                '@views': path.resolve(__dirname, './src/ide/views')
+              }
+            }
           },
         },
         {
           entry: 'electron/preload/index.ts',
           onstart(options) {
-            // Notify the Renderer-Process to reload the page when the Preload-Scripts build is complete, 
+            // Notify the Renderer-Process to reload the page when the Preload-Scripts build is complete,
             // instead of restarting the entire Electron App.
             options.reload()
           },
@@ -54,6 +62,14 @@ export default defineConfig(({ command }) => {
                 external: Object.keys('dependencies' in pkg ? pkg.dependencies : {}),
               },
             },
+            // Add the `resolve` field here
+            resolve: {
+              // Define your aliases here
+              alias: {
+                '@': path.resolve(__dirname, './src'),
+                '@views': path.resolve(__dirname, './src/ide/views')
+              }
+            }
           },
         }
       ]),
@@ -69,6 +85,7 @@ export default defineConfig(({ command }) => {
         port: +url.port,
       }
     })(),
-    clearScreen: false,
+    clearScreen: false
   }
-})
+
+});