chore: setup fronted end env

noctisynth · Jul 12, 2024 · 02d0464 · 02d0464
1 parent d16f782
commit 02d0464
Show file tree

Hide file tree

Showing 8 changed files with 170 additions and 6 deletions.
diff --git a/.gitignore b/.gitignore
@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Unplugin
+components.d.ts
diff --git a/index.html b/index.html
@@ -1,14 +1,25 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <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>Tauri + Vue + TS</title>
+    <title>Grassator</title>
   </head>
 
   <body>
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
+  <style>
+    html,
+    body,
+    #app {
+      height: 100%;
+      width: 100%;
+      margin: unset;
+      border: unset;
+      padding: unset;
+    }
+  </style>
 </html>
diff --git a/package.json b/package.json
@@ -13,9 +13,12 @@
     "@primevue/themes": "^4.0.0",
     "@tauri-apps/api": "2.0.0-beta.14",
     "@tauri-apps/plugin-shell": "2.0.0-beta.7",
+    "pinia": "^2.1.7",
+    "primeicons": "^7.0.0",
     "primevue": "^4.0.0",
     "unocss": "^0.61.3",
-    "vue": "^3.4.31"
+    "vue": "^3.4.31",
+    "vue-router": "^4.4.0"
   },
   "devDependencies": {
     "@primevue/auto-import-resolver": "^4.0.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/App.vue b/src/App.vue
@@ -2,9 +2,7 @@
 </script>
 
 <template>
-  <div class="container">
-
-  </div>
+  <RouterView />
 </template>
 
 <style scoped></style>
diff --git a/src/main.ts b/src/main.ts
@@ -1,11 +1,22 @@
+import "virtual:uno.css";
+import "primeicons/primeicons.css";
+
 import { createApp } from "vue";
+import { createPinia } from "pinia";
 import App from "./App.vue";
+import router from "./router";
 
 import PrimeVue from 'primevue/config';
 import Aura from '@primevue/themes/aura';
+import Ripple from "primevue/ripple";
+import Toast from "primevue/toast";
+import ToastService from "primevue/toastservice";
 
 const app = createApp(App)
+const pinia = createPinia()
+
 app.use(PrimeVue, {
+    ripple: true,
     theme: {
         preset: Aura,
         options: {
@@ -15,5 +26,11 @@ app.use(PrimeVue, {
         }
     }
 });
+app.use(ToastService);
+app.directive("ripple", Ripple);
+app.component("Toast", Toast);
+
+app.use(pinia);
+app.use(router);
 
 app.mount("#app");
diff --git a/src/router/index.ts b/src/router/index.ts
@@ -0,0 +1,37 @@
+import {
+  createRouter,
+  createWebHashHistory,
+  type RouteRecordRaw,
+} from "vue-router";
+
+const views = import.meta.glob([
+  "../views/**/*.vue",
+  "../views/**/index.vue",
+  "../views/**/\\[*\\].vue",
+]);
+
+const routes: RouteRecordRaw[] = Object.entries(views).map(
+  ([filePath, component]) => {
+    let path = filePath
+      .replace(/^\.\.\/views\//, "")
+      .replace(/\.vue$/, "")
+      .replace(/^(.*)\/?index$/, "$1")
+      .replace(/\[(\w+)\]$/, ":$1");
+    path = "/" + path;
+
+    return {
+      path,
+      name: filePath.replace(/^\.\.\/views\//, ""),
+      component,
+    } satisfies RouteRecordRaw;
+  }
+);
+
+console.log(routes.length);
+
+const router = createRouter({
+  history: createWebHashHistory(import.meta.env.BASE_URL),
+  routes: [...routes],
+});
+
+export default router;
diff --git a/src/views/index.vue b/src/views/index.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { invoke } from '@tauri-apps/api/core';
+import { onMounted } from 'vue';
+
+onMounted(async () => {
+
+})
+</script>
+
+<template>
+    <main class="h-full w-full">
+        <div class="flex h-full w-full justify-center items-center">
+            <h1 class="text-4xl font-bold">Welcome to Grassator</h1>
+        </div>
+    </main>
+</template>
+
+<style scoped></style>