Add vue-router

Add home page
This commit is contained in:
2024-04-26 14:31:58 +01:00
parent a7854fbbe3
commit 4eec366672
4 changed files with 29 additions and 44 deletions

View File

@@ -9,10 +9,11 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"vue": "^3.2.37" "vue": "^3.2.37",
"vue-router": "^4.3.2"
}, },
"devDependencies": { "devDependencies": {
"@vitejs/plugin-vue": "^3.0.3", "@vitejs/plugin-vue": "^3.0.3",
"vite": "^3.0.7" "vite": "^3.0.7"
} }
} }

View File

@@ -1,21 +1,11 @@
<script setup> <script setup>
import HelloWorld from './components/HelloWorld.vue'</script> import { RouterView } from 'vue-router'
</script>
<template> <template>
<img id="logo" alt="Wails logo" src="./assets/images/logo-universal.png"/> <main>
<HelloWorld/> <RouterView />
</main>
</template> </template>
<style> <style></style>
#logo {
display: block;
width: 50%;
height: 50%;
margin: auto;
padding: 10% 0 0;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
background-origin: content-box;
}
</style>

View File

@@ -1,5 +1,22 @@
import {createApp} from 'vue' import { createApp } from 'vue'
import { createWebHashHistory, createRouter } from 'vue-router'
import App from './App.vue' import App from './App.vue'
import './style.css'; import './style.css';
createApp(App).mount('#app') const routes = [
{
path: '/',
name: 'home',
component: () => import('./pages/Index.vue')
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
createApp(App)
.use(router)
.mount('#app')

View File

@@ -1,26 +1,3 @@
html {
background-color: rgba(27, 38, 54, 1);
text-align: center;
color: white;
}
body {
margin: 0;
color: white;
font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
}
@font-face {
font-family: "Nunito";
font-style: normal;
font-weight: 400;
src: local(""),
url("assets/fonts/nunito-v16-latin-regular.woff2") format("woff2");
}
#app { #app {
height: 100vh; height: 100vh;
text-align: center;
} }