vue3.0 init

frontend/vue-ts/src/App.vue

@@ -0,0 +1,3 @@
+<template>
+  <router-view/>
+</template>

frontend/vue-ts/src/main.ts

@@ -0,0 +1,6 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+
+createApp(App).use(store).use(router).mount('#app')

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

@@ -0,0 +1,25 @@
+import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
+import Home from '../views/home.vue'
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    name: 'home',
+    component: Home
+  },
+  // {
+  //   path: '/about',
+  //   name: 'About',
+  //   // route level code-splitting
+  //   // this generates a separate chunk (about.[hash].js) for this route
+  //   // which is lazy-loaded when the route is visited.
+  //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+  // }
+]
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes
+})
+
+export default router

frontend/vue-ts/src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

frontend/vue-ts/src/store/index.ts

@@ -0,0 +1,12 @@
+import { createStore } from 'vuex'
+
+export default createStore({
+  state: {
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  modules: {
+  }
+})

frontend/vue-ts/src/views/home.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>{{ text }}</div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue"
+export default {
+  setup() {
+    const text = ref("vue-ts")
+    return {
+      text
+    }
+  }
+}
+</script>