fix : move to vite TypeScript from vue JavaScript

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", "${project.projectDir}/src/vite-frontend/node_modules"
 }
 
 task npmBuild(type: NpmTask, dependsOn: ['deleteVueBuildFiles', 'npmInstall']) {

src/frontend/.gitignore

@@ -1,23 +0,0 @@
-.DS_Store
-node_modules
-/dist
-
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-
-# Editor directories and files
-.idea
-.vscode
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?

src/frontend/README.md

@@ -1,24 +0,0 @@
-# frontend
-
-## Project setup
-```
-npm install
-```
-
-### Compiles and hot-reloads for development
-```
-npm run serve
-```
-
-### Compiles and minifies for production
-```
-npm run build
-```
-
-### Lints and fixes files
-```
-npm run lint
-```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).

src/frontend/babel.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
-}

src/frontend/jsconfig.json

@@ -1,19 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "module": "esnext",
-    "baseUrl": "./",
-    "moduleResolution": "node",
-    "paths": {
-      "@/*": [
-        "src/*"
-      ]
-    },
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ]
-  }
-}

src/frontend/package.json

@@ -1,49 +0,0 @@
-{
-  "name": "frontend",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
-  },
-  "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.13",
-    "vue-router": "^4.0.13"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.12.16",
-    "@babel/eslint-parser": "^7.12.16",
-    "@vue/cli-plugin-babel": "~5.0.0",
-    "@vue/cli-plugin-eslint": "~5.0.0",
-    "@vue/cli-service": "~5.0.0",
-    "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^8.0.3"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/vue3-essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "@babel/eslint-parser"
-    },
-    "rules": {}
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead",
-    "not ie 11"
-  ]
-}

src/frontend/src/App.vue

@@ -1,30 +0,0 @@
-<template>
-  <TheHeader></TheHeader>
-  <router-view></router-view>
-  <TheFooter></TheFooter>
-</template>
-
-<script>
-import TheHeader from '@/components/TheHeader.vue'
-import TheFooter from "@/components/TheFooter";
-
-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>

src/frontend/src/main.js

@@ -1,11 +0,0 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import router from "./router";
-import axios from 'axios';
-
-axios.defaults.baseURL = 'http://3.35.44.58:8080/'
-const app = createApp(App);
-app.config.globalProperties.axios = axios;
-app.use(router,axios);
-app.mount('#app');
-

src/frontend/vue.config.js

@@ -1,18 +0,0 @@
-const { defineConfig } = require('@vue/cli-service')
-module.exports = defineConfig({
-  transpileDependencies: true,
-  outputDir: "../main/resources/static",
-
-  devServer: {
-    port: 4000,
-    proxy:{
-      '/': {
-        target : "http://3.35.44.58:8080",
-        pathRewrite: {'^/':''},
-        changeOrigin: true,
-        secure: false
-      }
-    }
-  }
-
-})

src/vite-frontend/src/router/index.ts

@@ -4,27 +4,27 @@ const routes = [
     {
         path: "/",
         name: "Home",
-        component: () => import(/* webpackChunkName "home" */ '@/views/TheHome.vue')
+        component: () => import(/* webpackChunkName "home" */ '../views/TheHome.vue')
     },
     {
         path: "/settings",
         name: "Settings",
-        component: () => import(/* webpackChunkName "inputTag" */ '@/views/TheSetting.vue')
+        component: () => import(/* webpackChunkName "inputTag" */ '../views/TheSetting.vue')
     },
     {
         path: "/login",
         name: "Login",
-        component: () => import(/* webpackChunkName "inputTag" */ '@/views/TheLogin.vue')
+        component: () => import(/* webpackChunkName "inputTag" */ '../views/TheLogin.vue')
     },
     {
         path: "/register",
         name: "Register",
-        component: () => import(/* webpackChunkName "inputTag" */ '@/views/TheRegister.vue')
+        component: () => import(/* webpackChunkName "inputTag" */ '../views/TheRegister.vue')
     },
     {
         path: "/article",
         name: "Article",
-        component: () => import(/* webpackChunkName "inputTag" */ '@/views/TheArticle.vue')
+        component: () => import(/* webpackChunkName "inputTag" */ '../views/TheArticle.vue')
     },
 ];
 

src/vite-frontend/src/views/TheRegister.vue

@@ -42,7 +42,7 @@
 <script>
 
 import axios from "axios";
-import router from "@/router";
+import router from "../router";
 import {reactive, ref} from "vue";
 
 export default {