Michal Vasalovsky
4 years ago
18 changed files with 12596 additions and 8 deletions
@ -1,11 +1,23 @@ |
|||
# ---> Vue |
|||
# gitignore template for Vue.js projects |
|||
# |
|||
# Recommended template: Node.gitignore |
|||
.DS_Store |
|||
node_modules |
|||
/dist |
|||
|
|||
# TODO: where does this rule come from? |
|||
docs/_book |
|||
|
|||
# TODO: where does this rule come from? |
|||
test/ |
|||
# local env files |
|||
.env.local |
|||
.env.*.local |
|||
|
|||
# Log files |
|||
npm-debug.log* |
|||
yarn-debug.log* |
|||
yarn-error.log* |
|||
pnpm-debug.log* |
|||
|
|||
# Editor directories and files |
|||
.idea |
|||
.vscode |
|||
*.suo |
|||
*.ntvs* |
|||
*.njsproj |
|||
*.sln |
|||
*.sw? |
|||
|
|||
@ -1,2 +1,24 @@ |
|||
# snidane |
|||
|
|||
## Project setup |
|||
``` |
|||
npm install |
|||
``` |
|||
|
|||
### Compiles and hot-reloads for development |
|||
``` |
|||
npm run serve |
|||
``` |
|||
|
|||
### Compiles and minifies for production |
|||
``` |
|||
npm run build |
|||
``` |
|||
|
|||
### Lints and fixes files |
|||
``` |
|||
npm run lint |
|||
``` |
|||
|
|||
### Customize configuration |
|||
See [Configuration Reference](https://cli.vuejs.org/config/). |
|||
|
|||
@ -0,0 +1,5 @@ |
|||
module.exports = { |
|||
presets: [ |
|||
'@vue/cli-plugin-babel/preset' |
|||
] |
|||
} |
|||
File diff suppressed because it is too large
@ -0,0 +1,42 @@ |
|||
{ |
|||
"name": "snidane", |
|||
"version": "0.1.0", |
|||
"private": true, |
|||
"scripts": { |
|||
"serve": "vue-cli-service serve", |
|||
"build": "vue-cli-service build", |
|||
"lint": "vue-cli-service lint" |
|||
}, |
|||
"dependencies": { |
|||
"core-js": "^3.6.5", |
|||
"vue": "^3.0.0" |
|||
}, |
|||
"devDependencies": { |
|||
"@vue/cli-plugin-babel": "~4.5.0", |
|||
"@vue/cli-plugin-eslint": "~4.5.0", |
|||
"@vue/cli-service": "~4.5.0", |
|||
"@vue/compiler-sfc": "^3.0.0", |
|||
"babel-eslint": "^10.1.0", |
|||
"eslint": "^6.7.2", |
|||
"eslint-plugin-vue": "^7.0.0" |
|||
}, |
|||
"eslintConfig": { |
|||
"root": true, |
|||
"env": { |
|||
"node": true |
|||
}, |
|||
"extends": [ |
|||
"plugin:vue/vue3-essential", |
|||
"eslint:recommended" |
|||
], |
|||
"parserOptions": { |
|||
"parser": "babel-eslint" |
|||
}, |
|||
"rules": {} |
|||
}, |
|||
"browserslist": [ |
|||
"> 1%", |
|||
"last 2 versions", |
|||
"not dead" |
|||
] |
|||
} |
|||
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 18 KiB |
@ -0,0 +1,17 @@ |
|||
<!DOCTYPE html> |
|||
<html lang=""> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|||
<meta name="viewport" content="width=device-width,initial-scale=1.0"> |
|||
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> |
|||
<title><%= htmlWebpackPlugin.options.title %></title> |
|||
</head> |
|||
<body> |
|||
<noscript> |
|||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
|||
</noscript> |
|||
<div id="app"></div> |
|||
<!-- built files will be auto injected --> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,143 @@ |
|||
<template> |
|||
<div> |
|||
<h1>Snídaně</h1> |
|||
<div class="menu-wrap"> |
|||
<div :style="{width: sirka + 'px'}"> |
|||
<div v-on:click="seznam.push(obj)" v-for="obj, i in menu" :key="i" class="menu"> |
|||
<img :src="obj.obrazek" alt=""> |
|||
<p> |
|||
{{ obj.popisek }}, {{ obj.cena }} Kč |
|||
</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<p class="cena"> |
|||
celková cena: {{ cena }} kč |
|||
</p> |
|||
<p> |
|||
<button v-on:click="seznam = []">vyprázdnit košík</button> |
|||
</p> |
|||
|
|||
<div v-for="obj, i in seznam" :key="i" class="seznam-grid"> |
|||
<img :src="obj.obrazek" alt=""> |
|||
<div>{{ obj.popisek }}</div> |
|||
<div>{{ obj.cena }},-</div> |
|||
<div><button>odebrat</button></div> |
|||
|
|||
</div></div> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
export default { |
|||
name: 'App', |
|||
data: () => { |
|||
return { |
|||
menu: [ |
|||
{ |
|||
obrazek: "/img/caj.jpg", |
|||
popisek: "Černý čaj", |
|||
cena: 15, |
|||
}, |
|||
{ |
|||
obrazek: "/img/corn-flakes.jpg", |
|||
popisek: "Kukuřičné vločky", |
|||
cena: 32, |
|||
}, |
|||
{ |
|||
obrazek: "/img/maslo.jpg", |
|||
popisek: "Máslo", |
|||
cena: 40, |
|||
}, |
|||
{ |
|||
obrazek: "/img/med.jpg", |
|||
popisek: "Med", |
|||
cena: 20, |
|||
}, |
|||
{ |
|||
obrazek: "/img/mleko.png", |
|||
popisek: "Mléko", |
|||
cena: 9, |
|||
}, |
|||
{ |
|||
obrazek: "/img/rohlik.jpg", |
|||
popisek: "Rohlík", |
|||
cena: 6.50, |
|||
}, |
|||
{ |
|||
obrazek: "/img/salam.jpg", |
|||
popisek: "Salám", |
|||
cena: 12, |
|||
}, |
|||
{ |
|||
obrazek: "/img/vejce-na-tvrdo.jpg", |
|||
popisek: "Vejce na tvrdo", |
|||
cena: 55, |
|||
}, |
|||
], |
|||
seznam: [], |
|||
} |
|||
}, |
|||
computed: { |
|||
sirka: function() { |
|||
return this.menu.length * 240 + this.menu.length * 10 + this.menu.length * 2 |
|||
}, |
|||
cena: function() { |
|||
let celkem = 0 |
|||
for (let index = 0; index < this.seznam.length; index++) { |
|||
const element = this.seznam[index]; |
|||
celkem += element.cena |
|||
|
|||
} |
|||
return celkem |
|||
}, |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.menu { |
|||
display: inline-block; |
|||
width: 15em; |
|||
border: 1px solid gray; |
|||
margin-right: 10px; |
|||
|
|||
} |
|||
|
|||
.menu:hover { |
|||
cursor: pointer; |
|||
border-color: cornflowerblue; |
|||
|
|||
} |
|||
|
|||
.menu img { |
|||
width: 100%; |
|||
} |
|||
|
|||
.menu p { |
|||
text-align: center; |
|||
} |
|||
|
|||
.menu-wrap { |
|||
margin: 0 auto; |
|||
width: 50%; |
|||
overflow-x: scroll; |
|||
} |
|||
|
|||
.seznam-grid{ |
|||
width: 30%; |
|||
margin: 0 auto; |
|||
display: grid; |
|||
grid-template-columns: 2fr 3fr 1fr 1fr; |
|||
} |
|||
|
|||
.seznam-grid div { |
|||
align-self: center; |
|||
} |
|||
|
|||
.seznam-grid img{ |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,58 @@ |
|||
<template> |
|||
<div class="hello"> |
|||
<h1>{{ msg }}</h1> |
|||
<p> |
|||
For a guide and recipes on how to configure / customize this project,<br> |
|||
check out the |
|||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>. |
|||
</p> |
|||
<h3>Installed CLI Plugins</h3> |
|||
<ul> |
|||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li> |
|||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li> |
|||
</ul> |
|||
<h3>Essential Links</h3> |
|||
<ul> |
|||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li> |
|||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li> |
|||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li> |
|||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li> |
|||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li> |
|||
</ul> |
|||
<h3>Ecosystem</h3> |
|||
<ul> |
|||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li> |
|||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li> |
|||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li> |
|||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li> |
|||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li> |
|||
</ul> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'HelloWorld', |
|||
props: { |
|||
msg: String |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<!-- Add "scoped" attribute to limit CSS to this component only --> |
|||
<style scoped> |
|||
h3 { |
|||
margin: 40px 0 0; |
|||
} |
|||
ul { |
|||
list-style-type: none; |
|||
padding: 0; |
|||
} |
|||
li { |
|||
display: inline-block; |
|||
margin: 0 10px; |
|||
} |
|||
a { |
|||
color: #42b983; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,4 @@ |
|||
import { createApp } from 'vue' |
|||
import App from './App.vue' |
|||
|
|||
createApp(App).mount('#app') |
|||
Loading…
Reference in new issue