mirror of
https://github.com/MarcZierle/photo-log-frontend.git
synced 2025-04-07 13:04:37 +00:00
implement base vue files
This commit is contained in:
MarcZierle
parent
48c176035e
commit
1f8ab781cf
@ -20,19 +20,19 @@
|
||||
],
|
||||
"rules": {
|
||||
"indent": [
|
||||
"warn",
|
||||
"tab"
|
||||
"error",
|
||||
"tab"
|
||||
],
|
||||
"linebreak-style": [
|
||||
"warn",
|
||||
"off",
|
||||
"unix"
|
||||
],
|
||||
"quotes": [
|
||||
"warn",
|
||||
"error",
|
||||
"single"
|
||||
],
|
||||
"semi": [
|
||||
"warn",
|
||||
"error",
|
||||
"never"
|
||||
],
|
||||
"vue/no-v-model-argument": "off"
|
||||
|
||||
15
package-lock.json
generated
15
package-lock.json
generated
@ -28,7 +28,8 @@
|
||||
"naive-ui": "^2.23.2",
|
||||
"prettier": "^2.2.1",
|
||||
"sass": "^1.26.5",
|
||||
"sass-loader": "^8.0.2"
|
||||
"sass-loader": "^8.0.2",
|
||||
"vfonts": "^0.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/code-frame": {
|
||||
@ -12628,9 +12629,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/selfsigned": {
|
||||
"version": "1.10.11",
|
||||
"resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.11.tgz",
|
||||
"integrity": "sha512-aVmbPOfViZqOZPgRBT0+3u4yZFHpmnIghLMlAcb5/xhp5ZtB/RVnKhz5vl2M32CLXAqR4kha9zfhNg0Lf/sxKA==",
|
||||
"version": "1.10.14",
|
||||
"resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.14.tgz",
|
||||
"integrity": "sha512-lkjaiAye+wBZDCBsu5BGi0XiLRxeUlsGod5ZP924CRSEoGuZAw/f7y9RKu28rwTfiHVhdavhB0qH0INV6P1lEA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"node-forge": "^0.10.0"
|
||||
@ -25986,9 +25987,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"selfsigned": {
|
||||
"version": "1.10.11",
|
||||
"resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.11.tgz",
|
||||
"integrity": "sha512-aVmbPOfViZqOZPgRBT0+3u4yZFHpmnIghLMlAcb5/xhp5ZtB/RVnKhz5vl2M32CLXAqR4kha9zfhNg0Lf/sxKA==",
|
||||
"version": "1.10.14",
|
||||
"resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.14.tgz",
|
||||
"integrity": "sha512-lkjaiAye+wBZDCBsu5BGi0XiLRxeUlsGod5ZP924CRSEoGuZAw/f7y9RKu28rwTfiHVhdavhB0qH0INV6P1lEA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"node-forge": "^0.10.0"
|
||||
|
||||
@ -28,6 +28,7 @@
|
||||
"naive-ui": "^2.23.2",
|
||||
"prettier": "^2.2.1",
|
||||
"sass": "^1.26.5",
|
||||
"sass-loader": "^8.0.2"
|
||||
"sass-loader": "^8.0.2",
|
||||
"vfonts": "^0.1.0"
|
||||
}
|
||||
}
|
||||
|
||||
54
src/App.vue
54
src/App.vue
@ -1,46 +1,42 @@
|
||||
<template>
|
||||
<n-config-provider :theme="null">
|
||||
<n-message-provider>
|
||||
<div id="nav">
|
||||
<router-link to="/">Startseite</router-link> |
|
||||
<router-link to="/about">Das sind wir</router-link>
|
||||
</div>
|
||||
<router-view />
|
||||
</n-message-provider>
|
||||
</n-config-provider>
|
||||
<n-config-provider :theme="null">
|
||||
<n-message-provider>
|
||||
<NavBar v-if="!isHome" />
|
||||
<router-view />
|
||||
</n-message-provider>
|
||||
</n-config-provider>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent } from 'vue'
|
||||
import {darkTheme} from 'naive-ui'
|
||||
|
||||
import NavBar from '@/components/NavBar'
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
return { darkTheme }
|
||||
}
|
||||
components: {
|
||||
NavBar,
|
||||
},
|
||||
data() {
|
||||
return { darkTheme }
|
||||
},
|
||||
computed: {
|
||||
isHome() {
|
||||
return this.$route.name == 'Home'
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
body,html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#nav {
|
||||
padding: 30px;
|
||||
|
||||
a {
|
||||
font-weight: bold;
|
||||
color: #2c3e50;
|
||||
|
||||
&.router-link-exact-active {
|
||||
color: #42b983;
|
||||
}
|
||||
}
|
||||
* {
|
||||
font-family: v-sans;
|
||||
font-weight: 400;
|
||||
}
|
||||
</style>
|
||||
|
||||
BIN
src/assets/images/home_bg.jpg
Normal file
BIN
src/assets/images/home_bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
@ -1,67 +0,0 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
Check me out, BOY!!!
|
||||
</p>
|
||||
|
||||
<n-button type="primary" @click="showModal = true">Open Modal</n-button>
|
||||
<n-modal
|
||||
v-model:show="showModal"
|
||||
:mask-closable="false"
|
||||
preset="dialog"
|
||||
title="Dialog"
|
||||
content="Are you sure?"
|
||||
positive-text="Confirm"
|
||||
@positive-click="onPositiveClick"
|
||||
@negative-click="onNegativeClick"
|
||||
negative-text="Cancel"
|
||||
/>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useMessage } from 'naive-ui'
|
||||
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
props: {
|
||||
msg: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
message: useMessage(),
|
||||
showModal: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onPositiveClick () {
|
||||
this.message.success('Submit')
|
||||
this.showModal = false
|
||||
},
|
||||
onNegativeClick () {
|
||||
this.message.success('Cancel')
|
||||
this.showModalRef = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="scss">
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
23
src/components/NavBar.vue
Normal file
23
src/components/NavBar.vue
Normal file
@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<nav>
|
||||
<router-link :to="{name: 'Home'}">Home</router-link>
|
||||
<router-link :to="{name: 'LogsList'}">All Logs</router-link>
|
||||
<router-link :to="{name: 'CreateLog'}">+ New</router-link>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'NavBar',
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
nav {
|
||||
width: 100%;
|
||||
border-bottom: 1px solid gray;
|
||||
}
|
||||
</style>
|
||||
14
src/main.js
14
src/main.js
@ -1,10 +1,10 @@
|
||||
import { createApp } from "vue";
|
||||
import App from "./App.vue";
|
||||
import router from "./router";
|
||||
import store from "./store";
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
|
||||
import naive from "naive-ui";
|
||||
import naive from 'naive-ui'
|
||||
|
||||
var app = createApp(App).use(store).use(router)
|
||||
app.use(naive);
|
||||
app.mount("#app");
|
||||
app.use(naive)
|
||||
app.mount('#app')
|
||||
|
||||
@ -1,26 +1,31 @@
|
||||
import { createRouter, createWebHistory } from "vue-router";
|
||||
import Home from "../views/Home.vue";
|
||||
import 'vfonts/FiraSans.css'
|
||||
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import HomeView from '../views/Home.vue'
|
||||
import LogsList from '../views/LogsList.vue'
|
||||
import CreateLog from '../views/CreateLog.vue'
|
||||
|
||||
const routes = [
|
||||
{
|
||||
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"),
|
||||
},
|
||||
];
|
||||
{
|
||||
path: '/',
|
||||
name: 'Home',
|
||||
component: HomeView,
|
||||
},
|
||||
{
|
||||
path: '/logs',
|
||||
name: 'LogsList',
|
||||
component: LogsList
|
||||
},
|
||||
{
|
||||
path: '/logs/create',
|
||||
name: 'CreateLog',
|
||||
component: CreateLog
|
||||
}
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(process.env.BASE_URL),
|
||||
routes,
|
||||
});
|
||||
history: createWebHistory(),
|
||||
routes,
|
||||
})
|
||||
|
||||
export default router;
|
||||
export default router
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
<template>
|
||||
<div class="about">
|
||||
<h1>This is an about page</h1>
|
||||
</div>
|
||||
</template>
|
||||
3
src/views/CreateLog.vue
Normal file
3
src/views/CreateLog.vue
Normal file
@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<h1>Create Log</h1>
|
||||
</template>
|
||||
@ -1,18 +1,84 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<img alt="Vue logo" src="../assets/logo.png" />
|
||||
<HelloWorld msg="Willkommen to MEINE Vue App" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="banner-bg">
|
||||
<div>
|
||||
<n-gradient-text :size="40" type="success">
|
||||
Zierle-Training
|
||||
</n-gradient-text>
|
||||
<br>
|
||||
<n-gradient-text :size="30" type="info">
|
||||
Online Tools
|
||||
</n-gradient-text>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-menu">
|
||||
<n-space justify="space-around" >
|
||||
<n-space vertical>
|
||||
<h2>Documents</h2>
|
||||
<n-button type="primary">All Documents</n-button>
|
||||
</n-space>
|
||||
<n-space vertical>
|
||||
<h2>Photo Logs</h2>
|
||||
<n-space>
|
||||
<router-link :to="{name: 'LogsList'}">
|
||||
<n-button type="primary">All Logs</n-button>
|
||||
</router-link>
|
||||
<router-link :to="{name: 'CreateLog'}">
|
||||
<n-button type="info">+ New</n-button>
|
||||
</router-link>
|
||||
</n-space>
|
||||
<n-button>Crop Photos</n-button>
|
||||
</n-space>
|
||||
</n-space>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import HelloWorld from "@/components/HelloWorld.vue";
|
||||
|
||||
export default {
|
||||
name: "Home",
|
||||
components: {
|
||||
HelloWorld,
|
||||
},
|
||||
};
|
||||
name: 'HomeView'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.home-menu {
|
||||
margin: auto;
|
||||
position: relative;
|
||||
min-width: 30vw;
|
||||
max-width: 60vw;
|
||||
min-height: 20vh;
|
||||
background-color: white;
|
||||
z-index: 1;
|
||||
margin-top: 30vh;
|
||||
box-shadow: 0 0 50px rgba(0,0,0,0.25);
|
||||
border: none;
|
||||
border-radius: 0 2em;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.banner-bg {
|
||||
background-image: url('../assets/images/home_bg.jpg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
border-bottom-left-radius: 100% 30%;
|
||||
border-bottom-right-radius: 100% 30%;
|
||||
box-shadow: 0 0 50px rgba(0,0,0,0.25);
|
||||
}
|
||||
|
||||
.banner-bg div {
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
margin-top: 3em;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
3
src/views/LogsList.vue
Normal file
3
src/views/LogsList.vue
Normal file
@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<h1>Logs List</h1>
|
||||
</template>
|
||||
Loading…
Reference in New Issue
Block a user