create basic app structure #1

pull/1/head
Thomas Ballmann 4 years ago
parent 2bc62e80ae
commit d8227ec55b

@ -13,15 +13,19 @@
"vuetify": "^2.1.0"
},
"devDependencies": {
"@material-icons/svg": "^0.0.1",
"@vue/cli-plugin-babel": "~4.2.0",
"@vue/cli-plugin-eslint": "~4.2.0",
"@vue/cli-service": "~4.2.0",
"axios": "^0.19.2",
"babel-eslint": "^10.0.3",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.1.2",
"sass": "^1.19.0",
"sass-loader": "^8.0.0",
"vue-cli-plugin-vuetify": "~2.0.4",
"vue-router": "^3.1.5",
"vue-svg-loader": "^0.16.0",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.3.0"
},

@ -1,60 +1,80 @@
<template>
<v-app>
<v-app-bar
app
color="primary"
dark
>
<div class="d-flex align-center">
<v-img
alt="Vuetify Logo"
class="shrink mr-2"
contain
src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
transition="scale-transition"
width="40"
/>
<v-img
alt="Vuetify Name"
class="shrink mt-1 hidden-sm-and-down"
contain
min-width="100"
src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
width="100"
/>
</div>
<v-spacer></v-spacer>
<v-btn
href="https://github.com/vuetifyjs/vuetify/releases/latest"
target="_blank"
text
>
<span class="mr-2">Latest Release</span>
<v-icon>mdi-open-in-new</v-icon>
</v-btn>
</v-app-bar>
<v-content>
<HelloWorld/>
</v-content>
</v-app>
<v-app style="background: #e2e2e2">
<v-navigation-drawer
v-model="drawer"
app
>
<v-img :aspect-ratio="16/9" src="https://cdn.vuetifyjs.com/images/parallax/material.jpg">
<v-row align="end" class="lightbox white--text pa-2 fill-height">
<v-col>
<div class="subheading">update in 2min</div>
<!--<div class="body-1">heyfromjonathan@gmail.com</div>-->
</v-col>
</v-row>
</v-img>
<v-list-item>
<v-list-item-content>
<v-list-item-title class="title">
paperdash.io
</v-list-item-title>
<v-list-item-subtitle>
display
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-divider></v-divider>
<v-list>
<v-list-item
v-for="(link, i) in items"
:key="i"
:to="link.to"
active-class="primary white--text"
>
<v-list-item-action>
<component :is=link.icon class="icon icon-white"></component>
</v-list-item-action>
<v-list-item-title v-text="link.title" />
</v-list-item>
</v-list>
</v-navigation-drawer>
<v-content>
<v-container fluid fill-height class="align-start">
<router-view></router-view>
</v-container>
</v-content>
</v-app>
</template>
<script>
import HelloWorld from './components/HelloWorld';
//complete: {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/check/baseline.svg')}
export default {
name: 'App',
import iconDashboard from '!vue-svg-loader!@material-icons/svg/svg/check/baseline.svg'
components: {
HelloWorld,
},
data: () => ({
//
}),
};
export default {
name: 'App',
components: {
iconDashboard
},
data: () => ({
drawer: true,
items: [
{title: 'Dashboard', icon: 'iconDashboard', to: '/'},
{title: 'Settings', icon: '', to: '/settings'},
{title: 'Sandbox', icon: '', to: '/sandbox'},
],
})
};
</script>
<style scoped>
.lightbox {
box-shadow: 0 0 20px inset rgba(0, 0, 0, 0.2);
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 72px);
}
</style>

@ -0,0 +1,30 @@
/**
* Mocking client-server processing
*/
const _settings = {
"wifi_ssid": "",
"device_mode": "active",
// deep sleep
"cloud_refresh": 97
}
import axios from 'axios'
export default {
/**
* @param cb
* @returns {PromiseLike<any> | Promise<any>}
*/
getSettings(cb) {
return _settings
return axios
.get('/api/settings')
.then(response => cb(response.data))
}
}

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

@ -0,0 +1,19 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
const Dashboard = () => import(/* webpackChunkName: "dashboard" */ '../views/Dashboard')
const Settings = () => import(/* webpackChunkName: "settings" */ '../views/Settings')
const Sandbox = () => import(/* webpackChunkName: "sandbox" */ '../views/Sandbox')
Vue.use(VueRouter);
export default new VueRouter({
routes: [
{ path: '/', component: Dashboard },
{ path: '/settings', component: Settings },
{ path: '/sandbox', component: Sandbox },
{ path: '*', redirect: '/' }
],
});

@ -0,0 +1,21 @@
<template>
<v-container
fluid
grid-list-md
pa-2
>
dashboard...
</v-container>
</template>
<script>
//import api from '../api/core'
export default {
name: "Dashboard",
}
</script>
<style scoped>
</style>

@ -0,0 +1,21 @@
<template>
<v-container
fluid
grid-list-md
pa-2
>
sandbox :D
</v-container>
</template>
<script>
//import api from '../api/core'
export default {
name: "Sandbox",
}
</script>
<style scoped>
</style>

@ -0,0 +1,21 @@
<template>
<v-container
fluid
grid-list-md
pa-2
>
settings...
</v-container>
</template>
<script>
//import api from '../api/core'
export default {
name: "Settings",
}
</script>
<style scoped>
</style>

@ -809,6 +809,11 @@
cssnano-preset-default "^4.0.0"
postcss "^7.0.0"
"@material-icons/svg@^0.0.1":
version "0.0.1"
resolved "https://registry.yarnpkg.com/@material-icons/svg/-/svg-0.0.1.tgz#9c2ffa0e3597301de83ca476d5b66dd0e0968b0c"
integrity sha512-Um38W7r+GHpuT78XjkpUhIfBp3olXB6EDz53FAQoz4CnNtZL6TIdSsoaRl0sYKvcgqkX7wlKgEcb3amUVtK3jQ==
"@mrmlnc/readdir-enhanced@^2.2.1":
version "2.2.1"
resolved "https://registry.npm.taobao.org/@mrmlnc/readdir-enhanced/download/@mrmlnc/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@ -1556,6 +1561,13 @@ aws4@^1.8.0:
resolved "https://registry.npm.taobao.org/aws4/download/aws4-1.9.1.tgz?cache=0&sync_timestamp=1578958168482&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Faws4%2Fdownload%2Faws4-1.9.1.tgz#7e33d8f7d449b3f673cd72deb9abdc552dbe528e"
integrity sha1-fjPY99RJs/ZzzXLeuavcVS2+Uo4=
axios@^0.19.2:
version "0.19.2"
resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.2.tgz#3ea36c5d8818d0d5f8a8a97a6d36b86cdc00cb27"
integrity sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==
dependencies:
follow-redirects "1.5.10"
babel-eslint@^10.0.3:
version "10.0.3"
resolved "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.0.3.tgz?cache=0&sync_timestamp=1575991768389&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbabel-eslint%2Fdownload%2Fbabel-eslint-10.0.3.tgz#81a2c669be0f205e19462fed2482d33e4687a88a"
@ -2695,6 +2707,13 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3:
dependencies:
ms "2.0.0"
debug@=3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
dependencies:
ms "2.0.0"
debug@^3.0.0, debug@^3.1.1, debug@^3.2.5:
version "3.2.6"
resolved "https://registry.npm.taobao.org/debug/download/debug-3.2.6.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdebug%2Fdownload%2Fdebug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
@ -3599,6 +3618,13 @@ flush-write-stream@^1.0.0:
inherits "^2.0.3"
readable-stream "^2.3.6"
follow-redirects@1.5.10:
version "1.5.10"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
dependencies:
debug "=3.1.0"
follow-redirects@^1.0.0:
version "1.10.0"
resolved "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.10.0.tgz#01f5263aee921c6a54fb91667f08f4155ce169eb"
@ -7456,7 +7482,14 @@ svg-tags@^1.0.0:
resolved "https://registry.npm.taobao.org/svg-tags/download/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
integrity sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=
svgo@^1.0.0:
svg-to-vue@^0.7.0:
version "0.7.0"
resolved "https://registry.yarnpkg.com/svg-to-vue/-/svg-to-vue-0.7.0.tgz#ec86deb1742be38319462e36703af1dfa2f9fad9"
integrity sha512-Tg2nMmf3BQorYCAjxbtTkYyWPVSeox5AZUFvfy4MoWK/5tuQlnA/h3LAlTjV3sEvOC5FtUNovRSj3p784l4KOA==
dependencies:
svgo "^1.3.2"
svgo@^1.0.0, svgo@^1.3.2:
version "1.3.2"
resolved "https://registry.npm.taobao.org/svgo/download/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"
integrity sha1-ttxRHAYzRsnkFbgeQ0ARRbltQWc=
@ -7981,6 +8014,11 @@ vue-loader@^15.8.3:
vue-hot-reload-api "^2.3.0"
vue-style-loader "^4.1.0"
vue-router@^3.1.5:
version "3.1.5"
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.1.5.tgz#ff29b8a1e1306c526b52d4dc0532109f16c41231"
integrity sha512-BszkPvhl7I9h334GjckCh7sVFyjTPMMJFJ4Bsrem/Ik+B/9gt5tgrk8k4gGLO4ZpdvciVdg7O41gW4DisQWurg==
vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
version "4.1.2"
resolved "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"
@ -7989,6 +8027,14 @@ vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
hash-sum "^1.0.2"
loader-utils "^1.0.2"
vue-svg-loader@^0.16.0:
version "0.16.0"
resolved "https://registry.yarnpkg.com/vue-svg-loader/-/vue-svg-loader-0.16.0.tgz#adccbdc9aca90132bde9c9d96cd49f74efecd345"
integrity sha512-2RtFXlTCYWm8YAEO2qAOZ2SuIF2NvLutB5muc3KDYoZq5ZeCHf8ggzSan3ksbbca7CJ/Aw57ZnDF4B7W/AkGtw==
dependencies:
loader-utils "^1.2.3"
svg-to-vue "^0.7.0"
vue-template-compiler@^2.6.11:
version "2.6.11"
resolved "https://registry.npm.taobao.org/vue-template-compiler/download/vue-template-compiler-2.6.11.tgz#c04704ef8f498b153130018993e56309d4698080"

Loading…
Cancel
Save