diff --git a/src/App.vue b/src/App.vue index 8b39d47a6a80bd698f0b87595f0ec73364a62234..4ac04cbcf304afb5e7e35e1fd513c65e11763773 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,6 +1,5 @@ <script setup> import { RouterLink, RouterView } from 'vue-router' -import HelloWorld from './components/HelloWorld.vue' import Navbar from "@/components/Navbar.vue"; </script> diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue deleted file mode 100644 index 0a0988bcb91e4e3d0a442215f11ca79579d6b63e..0000000000000000000000000000000000000000 --- a/src/components/HelloWorld.vue +++ /dev/null @@ -1,43 +0,0 @@ -<script setup> -defineProps({ - msg: { - type: String, - required: true - } -}) -</script> - -<template> - <div class="greetings"> - <h1 class="green">{{ msg }}</h1> - <h3> - You’ve successfully created a project with - <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> + - <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. - </h3> - </div> -</template> - -<style scoped> -h1 { - font-weight: 500; - font-size: 2.6rem; - top: -10px; -} - -h3 { - font-size: 1.2rem; -} - -.greetings h1, -.greetings h3 { - text-align: center; -} - -@media (min-width: 1024px) { - .greetings h1, - .greetings h3 { - text-align: left; - } -} -</style> diff --git a/src/components/TheWelcome.vue b/src/components/TheWelcome.vue deleted file mode 100644 index 5e6462538ecda2ce6758b16fcbbf6e2e40f5d683..0000000000000000000000000000000000000000 --- a/src/components/TheWelcome.vue +++ /dev/null @@ -1,86 +0,0 @@ -<script setup> -import WelcomeItem from './WelcomeItem.vue' -import DocumentationIcon from './icons/IconDocumentation.vue' -import ToolingIcon from './icons/IconTooling.vue' -import EcosystemIcon from './icons/IconEcosystem.vue' -import CommunityIcon from './icons/IconCommunity.vue' -import SupportIcon from './icons/IconSupport.vue' -</script> - -<template> - <WelcomeItem> - <template #icon> - <DocumentationIcon /> - </template> - <template #heading>Documentation</template> - - Vue’s - <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a> - provides you with all information you need to get started. - </WelcomeItem> - - <WelcomeItem> - <template #icon> - <ToolingIcon /> - </template> - <template #heading>Tooling</template> - - This project is served and bundled with - <a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The - recommended IDE setup is - <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> + - <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If - you need to test your components and web pages, check out - <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and - <a href="https://on.cypress.io/component" target="_blank">Cypress Component Testing</a>. - - <br /> - - More instructions are available in <code>README.md</code>. - </WelcomeItem> - - <WelcomeItem> - <template #icon> - <EcosystemIcon /> - </template> - <template #heading>Ecosystem</template> - - Get official tools and libraries for your project: - <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>, - <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>, - <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and - <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If - you need more resources, we suggest paying - <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a> - a visit. - </WelcomeItem> - - <WelcomeItem> - <template #icon> - <CommunityIcon /> - </template> - <template #heading>Community</template> - - Got stuck? Ask your question on - <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official - Discord server, or - <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener" - >StackOverflow</a - >. You should also subscribe to - <a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow - the official - <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a> - twitter account for latest news in the Vue world. - </WelcomeItem> - - <WelcomeItem> - <template #icon> - <SupportIcon /> - </template> - <template #heading>Support Vue</template> - - As an independent project, Vue relies on community backing for its sustainability. You can help - us by - <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>. - </WelcomeItem> -</template> diff --git a/src/components/WelcomeItem.vue b/src/components/WelcomeItem.vue deleted file mode 100644 index a5eca70f81855b06fe4a9ba461f20fc4b9a049b7..0000000000000000000000000000000000000000 --- a/src/components/WelcomeItem.vue +++ /dev/null @@ -1,85 +0,0 @@ -<template> - <div class="item"> - <i> - <slot name="icon"></slot> - </i> - <div class="details"> - <h3> - <slot name="heading"></slot> - </h3> - <slot></slot> - </div> - </div> -</template> - -<style scoped> -.item { - margin-top: 2rem; - display: flex; -} - -.details { - flex: 1; - margin-left: 1rem; -} - -i { - display: flex; - place-items: center; - place-content: center; - width: 32px; - height: 32px; - color: var(--color-text); -} - -h3 { - font-size: 1.2rem; - font-weight: 500; - margin-bottom: 0.4rem; - color: var(--color-heading); -} - -@media (min-width: 1024px) { - .item { - margin-top: 0; - padding: 0.4rem 0 1rem calc(var(--section-gap) / 2); - } - - i { - top: calc(50% - 25px); - left: -26px; - position: absolute; - border: 1px solid var(--color-border); - background: var(--color-background); - border-radius: 8px; - width: 50px; - height: 50px; - } - - .item:before { - content: ' '; - border-left: 1px solid var(--color-border); - position: absolute; - left: 0; - bottom: calc(50% + 25px); - height: calc(50% - 25px); - } - - .item:after { - content: ' '; - border-left: 1px solid var(--color-border); - position: absolute; - left: 0; - top: calc(50% + 25px); - height: calc(50% - 25px); - } - - .item:first-of-type:before { - display: none; - } - - .item:last-of-type:after { - display: none; - } -} -</style> diff --git a/src/router/index.js b/src/router/index.js index e55886be743ae62825e3d6a446b9f9a66daa3fa8..15a23ad6677da293006f10f6f60f860643fb53d0 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,5 +1,6 @@ import { createRouter, createWebHistory } from 'vue-router' -import HomeView from '../views/HomeView.vue' +import HomeView from "@/views/HomeView.vue"; + const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue deleted file mode 100644 index 756ad2a17909837834858538422308120cf09dab..0000000000000000000000000000000000000000 --- a/src/views/AboutView.vue +++ /dev/null @@ -1,15 +0,0 @@ -<template> - <div class="about"> - <h1>This is an about page</h1> - </div> -</template> - -<style> -@media (min-width: 1024px) { - .about { - min-height: 100vh; - display: flex; - align-items: center; - } -} -</style> diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 6bb706f08b841ad18ad98fa022e34b1095749521..3cd834844d28a04cebd142f1d9203a0ddd8216bb 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -1,9 +1,9 @@ <script setup> -import TheWelcome from '../components/TheWelcome.vue' + </script> <template> <main> - <TheWelcome /> + <p>HALLO</p> </main> </template>