vetro/weather-demo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Kamil Klecha
2021-10-13 21:30:26 +02:00
parent ffed90ec4f
commit e57756227b
13 changed files with 752 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

813
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

26
package.json
View File

@@ -7,18 +7,24 @@
"build": "vue-cli-service build" "build": "vue-cli-service build"
}, },
"dependencies": { "dependencies": {
"core-js": "^3.6.5", "axios": "^0.23.0",
"vue": "^2.6.11", "core-js": "^3.18.3",
"vue-class-component": "^7.2.3", "vue": "^2.6.14",
"vue-class-component": "^7.2.6",
"vue-property-decorator": "^9.1.2", "vue-property-decorator": "^9.1.2",
"vuex": "^3.4.0" "vuetify": "^2.5.10",
"vuex": "^3.6.2"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-babel": "~4.5.13",
"@vue/cli-plugin-typescript": "~4.5.0", "@vue/cli-plugin-typescript": "~4.5.13",
"@vue/cli-plugin-vuex": "~4.5.0", "@vue/cli-plugin-vuex": "~4.5.13",
"@vue/cli-service": "~4.5.0", "@vue/cli-service": "~4.5.13",
"typescript": "~4.1.5", "sass": "~1.32.0",
"vue-template-compiler": "^2.6.11" "sass-loader": "^10.0.0",
"typescript": "~4.4.4",
"vue-cli-plugin-vuetify": "~2.4.3",
"vue-template-compiler": "^2.6.14",
"vuetify-loader": "^1.7.3"
} }
} }

4
public/index.html
View File

@@ -1,11 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang=""> <html lang="pl">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
</head> </head>
<body> <body>
<noscript> <noscript>

38
src/App.vue
View File

@@ -1,29 +1,29 @@
<template> <template>
<div id="app"> <v-app>
<img alt="Vue logo" src="./assets/logo.png"> <v-main>
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/> <component :is="module"></component>
</div> </v-main>
</v-app>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Vue } from 'vue-property-decorator'; import { Component, Vue } from "vue-property-decorator";
import HelloWorld from './components/HelloWorld.vue'; import Login from "@/components/Login.vue";
import Forecast from "@/components/Forecast.vue";
@Component({ @Component({
components: { components: {
HelloWorld, Login,
Forecast,
}, },
}) })
export default class App extends Vue {} export default class App extends Vue {
</script> get auth() {
return this.$store.getters.auth;
}
<style> get module() {
#app { return this.auth ? Forecast : Login;
font-family: Avenir, Helvetica, Arial, sans-serif; }
-webkit-font-smoothing: antialiased; };
-moz-osx-font-smoothing: grayscale; </script>
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

1
src/assets/logo.svg Normal file
View File

@@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 539 B

11
src/components/Forecast.vue Normal file
View File

@@ -0,0 +1,11 @@
<template>
<p>Forecast</p>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component
export default class Forecast extends Vue {
}
</script>

59
src/components/HelloWorld.vue
View File

@@ -1,59 +0,0 @@
<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-typescript" target="_blank" rel="noopener">typescript</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</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 lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class HelloWorld extends Vue {
@Prop() private 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>

11
src/components/Login.vue Normal file
View File

@@ -0,0 +1,11 @@
<template>
<p>Login</p>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component
export default class Login extends Vue {
}
</script>

2
src/main.ts
View File

@@ -1,10 +1,12 @@
import Vue from 'vue' import Vue from 'vue'
import App from './App.vue' import App from './App.vue'
import store from './store' import store from './store'
import vuetify from './plugins/vuetify'
Vue.config.productionTip = false Vue.config.productionTip = false
new Vue({ new Vue({
store, store,
vuetify,
render: h => h(App) render: h => h(App)
}).$mount('#app') }).$mount('#app')

12
src/plugins/vuetify.ts Normal file
View File

@@ -0,0 +1,12 @@
import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';
import pl from 'vuetify/src/locale/pl';
Vue.use(Vuetify);
export default new Vuetify({
lang: {
locales: { pl },
current: 'pl',
},
});

4
src/shims-vuetify.d.ts vendored Normal file
View File

@@ -0,0 +1,4 @@
declare module 'vuetify/lib/framework' {
import Vuetify from 'vuetify'
export default Vuetify
}

19
src/store/index.ts
View File

@@ -1,15 +1,16 @@
import Vue from 'vue' import Vue from "vue";
import Vuex from 'vuex' import Vuex from "vuex";
Vue.use(Vuex) Vue.use(Vuex);
export default new Vuex.Store({ export default new Vuex.Store({
state: { state: {
token: "yes",
}, },
mutations: { mutations: {},
actions: {},
getters: {
auth: (state) => state.token !== undefined,
}, },
actions: { modules: {},
}, });
modules: {
}
})

5
vue.config.js Normal file
View File

@@ -0,0 +1,5 @@
module.exports = {
transpileDependencies: [
'vuetify'
]
}