fix : vue -> vue + vite

2022-11-16 10:41:02 +09:00
parent 2499fe3723
commit fe057b0f7c
24 changed files with 6065 additions and 2 deletions
--- a/build.gradle
+++ b/build.gradle
@@ -41,7 +41,7 @@ node {
    workDir = file("${project.projectDir}/.gradle/nodejs")

    npmWorkDir = file("${project.projectDir}/.gradle/npm")
-    nodeModulesDir = file("${project.projectDir}/src/frontend")
+    nodeModulesDir = file("${project.projectDir}/src/vite-frontend")

    nodeProxySettings = ProxySettings.SMART
 }
@@ -93,7 +93,7 @@ tasks.named('test') {
 apply plugin: 'com.github.node-gradle.node'

 task deleteVueBuildFiles(type: Delete) {
-    delete "src/main/resources/static/static", "src/main/resources/static/index.html", "${project.projectDir}/src/frontend/node_modules"
+    delete "src/main/resources/static/static", "src/main/resources/static/index.html"
 }

 task npmBuild(type: NpmTask, dependsOn: ['deleteVueBuildFiles', 'npmInstall']) {
--- a/src/vite-frontend/.gitignore
+++ b/src/vite-frontend/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/src/vite-frontend/README.md
+++ b/src/vite-frontend/README.md
@@ -0,0 +1,16 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
+
+## Type Support For `.vue` Imports in TS
+
+Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's Take Over mode by following these steps:
+
+1. Run `Extensions: Show Built-in Extensions` from VS Code's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
+2. Reload the VS Code window by running `Developer: Reload Window` from the command palette.
+
+You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471).
--- a/src/vite-frontend/index.html
+++ b/src/vite-frontend/index.html
@@ -0,0 +1,13 @@
+<!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>Conduct</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/src/vite-frontend/package-lock.json
+++ b/src/vite-frontend/package-lock.json
--- a/src/vite-frontend/package.json
+++ b/src/vite-frontend/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "vite-frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "assert": "^2.0.0",
+    "axios": "^1.1.3",
+    "core-js": "^3.8.3",
+    "https-browserify": "^1.0.0",
+    "path": "^0.12.7",
+    "request": "^2.88.2",
+    "vue": "^3.2.41",
+    "vue-router": "^4.0.13"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^3.2.0",
+    "typescript": "^4.6.4",
+    "vite": "^3.2.3",
+    "vue-tsc": "^1.0.9",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3"
+  }
+}
--- a/src/vite-frontend/public/index.html
+++ b/src/vite-frontend/public/index.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html lang="">
+  <body>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/src/vite-frontend/public/vite.svg
+++ b/src/vite-frontend/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/src/vite-frontend/src/App.vue
+++ b/src/vite-frontend/src/App.vue
@@ -0,0 +1,30 @@
+<template>
+  <TheHeader></TheHeader>
+  <router-view></router-view>
+  <TheFooter></TheFooter>
+</template>
+
+<script>
+import TheHeader from '@/components/TheHeader.vue'
+import TheFooter from "@/components/TheFooter.vue";
+
+export default {
+  name: 'App',
+  components: {
+    TheHeader,
+    TheFooter
+  },
+
+}
+</script>
+
+<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>
--- a/src/vite-frontend/src/assets/vue.svg
+++ b/src/vite-frontend/src/assets/vue.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
--- a/src/vite-frontend/src/components/TheFooter.vue
+++ b/src/vite-frontend/src/components/TheFooter.vue
@@ -0,0 +1,20 @@
+<template>
+  <footer>
+    <div class="container">
+      <a href="/" class="logo-font">conduit</a>
+      <span class="attribution">
+          An interactive learning project from <a href="https://thinkster.io">Thinkster</a>. Code &amp; design licensed under MIT.
+        </span>
+    </div>
+  </footer>
+</template>
+
+<script>
+export default {
+  name: "TheFooter"
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/vite-frontend/src/components/TheHeader.vue
+++ b/src/vite-frontend/src/components/TheHeader.vue
@@ -0,0 +1,49 @@
+<template>
+  <!DOCTYPE html>
+  <head>
+    <meta charset="utf-8">
+    <title>Conduit</title>
+    <!-- Import Ionicon icons & Google Fonts our Bootstrap theme relies on -->
+    <link href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
+    <link href="//fonts.googleapis.com/css?family=Titillium+Web:700|Source+Serif+Pro:400,700|Merriweather+Sans:400,700|Source+Sans+Pro:400,300,600,700,300italic,400italic,600italic,700italic"
+          rel="stylesheet" type="text/css">
+    <!-- Import the custom Bootstrap 4 theme from our hosted CDN -->
+    <link rel="stylesheet" href="//demo.productionready.io/main.css">
+  </head>
+
+  <nav class="navbar navbar-light">
+    <div class="container">
+      <a class="navbar-brand" href="/">conduit</a>
+      <ul class="nav navbar-nav pull-xs-right">
+        <li class="nav-item">
+          <!-- Add "active" class when you're on that page" -->
+          <router-link to="/" class="nav-link active" active-class="active">Home</router-link>
+        </li>
+        <li class="nav-item">
+          <router-link to="/article" class="nav-link" active-class="active">New Article</router-link>
+        </li>
+        <li class="nav-item">
+            <router-link to="/setting" class="nav-link" active-class="active"><i class="ion-gear-a"></i>Settings</router-link>
+        </li>
+        <li class="nav-item">
+          <router-link to="/login" class="nav-link" active-class="active">Sign in</router-link>
+        </li>
+        <li class="nav-item">
+          <router-link to="/register" class="nav-link" active-class="active">Sign up</router-link>
+        </li>
+      </ul>
+    </div>
+  </nav>
+
+
+</template>
+
+<script>
+export default {
+  name: "TheHeader"
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/vite-frontend/src/main.ts
+++ b/src/vite-frontend/src/main.ts
@@ -0,0 +1,7 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from "./router";
+
+const app = createApp(App);
+app.use(router);
+app.mount('#app');
--- a/src/vite-frontend/src/router/index.ts
+++ b/src/vite-frontend/src/router/index.ts
@@ -0,0 +1,37 @@
+// @ts-ignore
+import { createWebHashHistory, createRouter } from "vue-router";
+
+const routes = [
+    {
+        path: "/",
+        name: "Home",
+        component: () => import(/* webpackChunkName "home" */ '@/views/TheHome.vue')
+    },
+    {
+        path: "/settings",
+        name: "Settings",
+        component: () => import(/* webpackChunkName "inputTag" */ '@/views/TheSetting.vue')
+    },
+    {
+        path: "/login",
+        name: "Login",
+        component: () => import(/* webpackChunkName "inputTag" */ '@/views/TheLogin.vue')
+    },
+    {
+        path: "/register",
+        name: "Register",
+        component: () => import(/* webpackChunkName "inputTag" */ '@/views/TheRegister.vue')
+    },
+    {
+        path: "/article",
+        name: "Article",
+        component: () => import(/* webpackChunkName "inputTag" */ '@/views/TheArticle.vue')
+    },
+];
+
+const router = createRouter({
+    history: createWebHashHistory(),
+    routes,
+});
+
+export default router;
--- a/src/vite-frontend/src/style.css
+++ b/src/vite-frontend/src/style.css
@@ -0,0 +1,81 @@
+root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
--- a/src/vite-frontend/src/views/TheArticle.vue
+++ b/src/vite-frontend/src/views/TheArticle.vue
@@ -0,0 +1,46 @@
+<template>
+
+  <div class="editor-page">
+    <div class="container page">
+      <div class="row">
+
+        <div class="col-md-10 offset-md-1 col-xs-12">
+          <form>
+            <fieldset>
+              <fieldset class="form-group">
+                <input type="text" class="form-control form-control-lg" placeholder="Article Title">
+              </fieldset>
+              <fieldset class="form-group">
+                <input type="text" class="form-control" placeholder="What's this article about?">
+              </fieldset>
+              <fieldset class="form-group">
+                            <textarea class="form-control" rows="8"
+                                      placeholder="Write your article (in markdown)"></textarea>
+              </fieldset>
+              <fieldset class="form-group">
+                <input type="text" class="form-control" placeholder="Enter tags">
+                <div class="tag-list"></div>
+              </fieldset>
+              <button class="btn btn-lg pull-xs-right btn-primary" type="button">
+                Publish Article
+              </button>
+            </fieldset>
+          </form>
+        </div>
+
+      </div>
+    </div>
+  </div>
+
+
+</template>
+
+<script>
+export default {
+  name: "TheArticle"
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/vite-frontend/src/views/TheHome.vue
+++ b/src/vite-frontend/src/views/TheHome.vue
@@ -0,0 +1,96 @@
+<template>
+
+  <div class="home-page">
+
+    <div class="banner">
+      <div class="container">
+        <h1 class="logo-font">conduit</h1>
+        <p>A place to share your knowledge.</p>
+      </div>
+    </div>
+
+    <div class="container page">
+      <div class="row">
+
+        <div class="col-md-9">
+          <div class="feed-toggle">
+            <ul class="nav nav-pills outline-active">
+              <li class="nav-item">
+                <a class="nav-link disabled" href="">Your Feed</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link active" href="">Global Feed</a>
+              </li>
+            </ul>
+          </div>
+
+          <div class="article-preview">
+            <div class="article-meta">
+              <a href="profile.html"><img src="http://i.imgur.com/Qr71crq.jpg"/></a>
+              <div class="info">
+                <a href="" class="author">Eric Simons</a>
+                <span class="date">January 20th</span>
+              </div>
+              <button class="btn btn-outline-primary btn-sm pull-xs-right">
+                <i class="ion-heart"></i> 29
+              </button>
+            </div>
+            <a href="" class="preview-link">
+              <h1>How to build webapps that scale</h1>
+              <p>This is the description for the post.</p>
+              <span>Read more...</span>
+            </a>
+          </div>
+
+          <div class="article-preview">
+            <div class="article-meta">
+              <a href="profile.html"><img src="http://i.imgur.com/N4VcUeJ.jpg"/></a>
+              <div class="info">
+                <a href="" class="author">Albert Pai</a>
+                <span class="date">January 20th</span>
+              </div>
+              <button class="btn btn-outline-primary btn-sm pull-xs-right">
+                <i class="ion-heart"></i> 32
+              </button>
+            </div>
+            <a href="" class="preview-link">
+              <h1>The song you won't ever stop singing. No matter how hard you try.</h1>
+              <p>This is the description for the post.</p>
+              <span>Read more...</span>
+            </a>
+          </div>
+
+        </div>
+
+        <div class="col-md-3">
+          <div class="sidebar">
+            <p>Popular Tags</p>
+
+            <div class="tag-list">
+              <a href="" class="tag-pill tag-default">programming</a>
+              <a href="" class="tag-pill tag-default">javascript</a>
+              <a href="" class="tag-pill tag-default">emberjs</a>
+              <a href="" class="tag-pill tag-default">angularjs</a>
+              <a href="" class="tag-pill tag-default">react</a>
+              <a href="" class="tag-pill tag-default">mean</a>
+              <a href="" class="tag-pill tag-default">node</a>
+              <a href="" class="tag-pill tag-default">rails</a>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TheHome"
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/vite-frontend/src/views/TheLogin.vue
+++ b/src/vite-frontend/src/views/TheLogin.vue
@@ -0,0 +1,46 @@
+<template>
+
+  <div class="auth-page">
+    <div class="container page">
+      <div class="row">
+
+        <div class="col-md-6 offset-md-3 col-xs-12">
+          <h1 class="text-xs-center">Sign up</h1>
+          <p class="text-xs-center">
+            <a href="">Have an account?</a>
+          </p>
+
+          <ul class="error-messages">
+            <li>That email is already taken</li>
+          </ul>
+
+          <form>
+            <fieldset class="form-group">
+              <input class="form-control form-control-lg" type="text" placeholder="Your Name">
+            </fieldset>
+            <fieldset class="form-group">
+              <input class="form-control form-control-lg" type="text" placeholder="Email">
+            </fieldset>
+            <fieldset class="form-group">
+              <input class="form-control form-control-lg" type="password" placeholder="Password">
+            </fieldset>
+            <button class="btn btn-lg btn-primary pull-xs-right">
+              Sign up
+            </button>
+          </form>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TheLogin"
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/vite-frontend/src/views/TheRegister.vue
+++ b/src/vite-frontend/src/views/TheRegister.vue
@@ -0,0 +1,110 @@
+<template>
+
+  <div class="auth-page">
+    <div class="container page">
+      <div class="row">
+
+        <div class="col-md-6 offset-md-3 col-xs-12">
+          <h1 class="text-xs-center">Sign up</h1>
+          <p class="text-xs-center">
+            <a href="">Have an account?</a>
+          </p>
+
+          <ul class="error-messages" v-if="emailDuplicate">
+            <li align="left">email has already been taken</li>
+          </ul>
+          <ul class="error-messages" v-if="usernameDuplicate">
+            <li align="left">username has already been taken</li>
+          </ul>
+
+
+          <form>
+            <fieldset class="form-group">
+              <input class="form-control form-control-lg" type="text" placeholder="Your Name" v-model="user.username">
+            </fieldset>
+            <fieldset class="form-group">
+              <input class="form-control form-control-lg" type="text" placeholder="Email" v-model="user.email">
+            </fieldset>
+            <fieldset class="form-group">
+              <input class="form-control form-control-lg" type="password" placeholder="Password" v-model="user.password">
+            </fieldset>
+            <button @click = "signup"  class="btn btn-lg btn-primary pull-xs-right">
+              Sign up
+            </button>
+          </form>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import axios from "axios";
+import router from "@/router";
+import {reactive, ref} from "vue";
+
+export default {
+  name: "TheRegister.vue",
+  setup(){
+    let emailDuplicate = ref(false);
+    let usernameDuplicate = ref(false);
+
+    const user = reactive({
+      username: "",
+      email: "",
+      password: "",
+    })
+
+    const allHideError = () => {
+      emailDuplicate.value = false;
+      usernameDuplicate.value = false;
+    }
+
+    const showEmailUsernameError = () => {
+      emailDuplicate.value = true;
+      usernameDuplicate.value = true
+    };
+
+    const showEmailError = () => {
+      emailDuplicate.value = true;
+      usernameDuplicate.value = false;
+    };
+    const showUsernameError = () => {
+      usernameDuplicate.value = true;
+      emailDuplicate.value = false;
+    };
+
+    const signup = () => {
+      console.log(user)
+      axios.post('http://localhost:8080/api/users',{
+        user
+      })
+          .then(response => {
+            window.localStorage.setItem("token",response.data.user.token);
+            allHideError();
+            router.push("/");
+          })
+          .catch(error =>{
+            console.log(error);
+            const code = error.response.data.errors.code;
+            if(code == "DUPLICATE_EMAIL_USERNAME"){
+              showEmailUsernameError();
+            }else if(code == "DUPLICATE_EMAIL"){
+              showEmailError();
+            }else if(code == "DUPLICATE_USERNAME"){
+              showUsernameError();
+            }
+          })
+    }
+
+    return { user, emailDuplicate, usernameDuplicate,  signup, showEmailUsernameError,showEmailError, showUsernameError, allHideError }
+  },
+
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/vite-frontend/src/views/TheSetting.vue
+++ b/src/vite-frontend/src/views/TheSetting.vue
@@ -0,0 +1,48 @@
+<template>
+
+  <div class="settings-page">
+    <div class="container page">
+      <div class="row">
+
+        <div class="col-md-6 offset-md-3 col-xs-12">
+          <h1 class="text-xs-center">Your Settings</h1>
+
+          <form>
+            <fieldset>
+              <fieldset class="form-group">
+                <input class="form-control" type="text" placeholder="URL of profile picture">
+              </fieldset>
+              <fieldset class="form-group">
+                <input class="form-control form-control-lg" type="text" placeholder="Your Name">
+              </fieldset>
+              <fieldset class="form-group">
+                            <textarea class="form-control form-control-lg" rows="8"
+                                      placeholder="Short bio about you"></textarea>
+              </fieldset>
+              <fieldset class="form-group">
+                <input class="form-control form-control-lg" type="text" placeholder="Email">
+              </fieldset>
+              <fieldset class="form-group">
+                <input class="form-control form-control-lg" type="password" placeholder="Password">
+              </fieldset>
+              <button class="btn btn-lg btn-primary pull-xs-right">
+                Update Settings
+              </button>
+            </fieldset>
+          </form>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TheSetting"
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/vite-frontend/src/vite-env.d.ts
+++ b/src/vite-frontend/src/vite-env.d.ts
@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
--- a/src/vite-frontend/tsconfig.json
+++ b/src/vite-frontend/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "strict": true,
+    "jsx": "preserve",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["ESNext", "DOM"],
+    "skipLibCheck": true,
+    "noEmit": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "allowJs": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/src/vite-frontend/tsconfig.node.json
+++ b/src/vite-frontend/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/src/vite-frontend/vite.config.ts
+++ b/src/vite-frontend/vite.config.ts
@@ -0,0 +1,29 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  resolve: {
+    alias: [
+      {find: '@', replacement: '/src'} ,
+    ]
+  },
+  build:{
+    outDir: "../main/resources/static",
+  },
+  server: {
+    port: 4000,
+    proxy:{
+      '/': {
+        target : "http://3.35.44.58:8080",
+        //{'^/':''},
+        rewrite: (path) => path.replace(/^\//,''),
+        changeOrigin: true,
+        secure: false
+      }
+    }
+  },
+
+  plugins: [vue()]
+
+})
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>`