From 15717d221f8489fbfb8f015e5d7457756d0fd67e Mon Sep 17 00:00:00 2001 From: SRP-mango Date: Fri, 14 Jul 2023 22:07:00 +0700 Subject: [PATCH] change from vanila-ts to vue-ts --- .../.vscode/extensions.json | 3 + micromobility-navigation/README.md | 18 + micromobility-navigation/index.html | 2 +- micromobility-navigation/package-lock.json | 349 +++++++++++++++++- micromobility-navigation/package.json | 9 +- micromobility-navigation/src/App.vue | 30 ++ micromobility-navigation/src/assets/vue.svg | 1 + .../src/components/HelloWorld.vue | 38 ++ micromobility-navigation/src/counter.ts | 9 - micromobility-navigation/src/main.ts | 25 +- micromobility-navigation/src/style.css | 39 +- micromobility-navigation/src/typescript.svg | 1 - micromobility-navigation/tsconfig.json | 4 +- micromobility-navigation/tsconfig.node.json | 10 + micromobility-navigation/vite.config.ts | 7 + 15 files changed, 475 insertions(+), 70 deletions(-) create mode 100644 micromobility-navigation/.vscode/extensions.json create mode 100644 micromobility-navigation/README.md create mode 100644 micromobility-navigation/src/App.vue create mode 100644 micromobility-navigation/src/assets/vue.svg create mode 100644 micromobility-navigation/src/components/HelloWorld.vue delete mode 100644 micromobility-navigation/src/counter.ts delete mode 100644 micromobility-navigation/src/typescript.svg create mode 100644 micromobility-navigation/tsconfig.node.json create mode 100644 micromobility-navigation/vite.config.ts diff --git a/micromobility-navigation/.vscode/extensions.json b/micromobility-navigation/.vscode/extensions.json new file mode 100644 index 0000000..c0a6e5a --- /dev/null +++ b/micromobility-navigation/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] +} diff --git a/micromobility-navigation/README.md b/micromobility-navigation/README.md new file mode 100644 index 0000000..ef72fd5 --- /dev/null +++ b/micromobility-navigation/README.md @@ -0,0 +1,18 @@ +# Vue 3 + TypeScript + Vite + +This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 ` + + + + diff --git a/micromobility-navigation/src/assets/vue.svg b/micromobility-navigation/src/assets/vue.svg new file mode 100644 index 0000000..770e9d3 --- /dev/null +++ b/micromobility-navigation/src/assets/vue.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/micromobility-navigation/src/components/HelloWorld.vue b/micromobility-navigation/src/components/HelloWorld.vue new file mode 100644 index 0000000..7b25f3f --- /dev/null +++ b/micromobility-navigation/src/components/HelloWorld.vue @@ -0,0 +1,38 @@ + + + + + diff --git a/micromobility-navigation/src/counter.ts b/micromobility-navigation/src/counter.ts deleted file mode 100644 index 09e5afd..0000000 --- a/micromobility-navigation/src/counter.ts +++ /dev/null @@ -1,9 +0,0 @@ -export function setupCounter(element: HTMLButtonElement) { - let counter = 0 - const setCounter = (count: number) => { - counter = count - element.innerHTML = `count is ${counter}` - } - element.addEventListener('click', () => setCounter(counter + 1)) - setCounter(0) -} diff --git a/micromobility-navigation/src/main.ts b/micromobility-navigation/src/main.ts index 791547b..2425c0f 100644 --- a/micromobility-navigation/src/main.ts +++ b/micromobility-navigation/src/main.ts @@ -1,24 +1,5 @@ +import { createApp } from 'vue' import './style.css' -import typescriptLogo from './typescript.svg' -import viteLogo from '/vite.svg' -import { setupCounter } from './counter.ts' +import App from './App.vue' -document.querySelector('#app')!.innerHTML = ` -
- - - - - - -

Vite + TypeScript

-
- -
-

- Click on the Vite and TypeScript logos to learn more -

-
-` - -setupCounter(document.querySelector('#counter')!) +createApp(App).mount('#app') diff --git a/micromobility-navigation/src/style.css b/micromobility-navigation/src/style.css index b528b6c..7294765 100644 --- a/micromobility-navigation/src/style.css +++ b/micromobility-navigation/src/style.css @@ -36,34 +36,6 @@ h1 { line-height: 1.1; } -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.vanilla:hover { - filter: drop-shadow(0 0 2em #3178c6aa); -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} - button { border-radius: 8px; border: 1px solid transparent; @@ -83,6 +55,17 @@ 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; diff --git a/micromobility-navigation/src/typescript.svg b/micromobility-navigation/src/typescript.svg deleted file mode 100644 index d91c910..0000000 --- a/micromobility-navigation/src/typescript.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/micromobility-navigation/tsconfig.json b/micromobility-navigation/tsconfig.json index 75abdef..f82888f 100644 --- a/micromobility-navigation/tsconfig.json +++ b/micromobility-navigation/tsconfig.json @@ -12,6 +12,7 @@ "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, + "jsx": "preserve", /* Linting */ "strict": true, @@ -19,5 +20,6 @@ "noUnusedParameters": true, "noFallthroughCasesInSwitch": true }, - "include": ["src"] + "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], + "references": [{ "path": "./tsconfig.node.json" }] } diff --git a/micromobility-navigation/tsconfig.node.json b/micromobility-navigation/tsconfig.node.json new file mode 100644 index 0000000..42872c5 --- /dev/null +++ b/micromobility-navigation/tsconfig.node.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "composite": true, + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/micromobility-navigation/vite.config.ts b/micromobility-navigation/vite.config.ts new file mode 100644 index 0000000..05c1740 --- /dev/null +++ b/micromobility-navigation/vite.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [vue()], +})