Created keret
This commit is contained in:
parent
2388a5a587
commit
bac428238d
56
package-lock.json
generated
56
package-lock.json
generated
@ -7,8 +7,8 @@
|
||||
"": {
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"bootstrap": "^5.0.1",
|
||||
"bootstrap-vue": "^2.21.2",
|
||||
"bootstrap": "^4.5.2",
|
||||
"bootstrap-vue": "^2.16.0",
|
||||
"core-js": "^3.6.5",
|
||||
"vue": "^2.6.11",
|
||||
"vue-router": "^3.2.0",
|
||||
@ -1777,16 +1777,6 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/@popperjs/core": {
|
||||
"version": "2.9.2",
|
||||
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz",
|
||||
"integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==",
|
||||
"peer": true,
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/popperjs"
|
||||
}
|
||||
},
|
||||
"node_modules/@soda/friendly-errors-webpack-plugin": {
|
||||
"version": "1.8.0",
|
||||
"resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.0.tgz",
|
||||
@ -3865,15 +3855,16 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/bootstrap": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.0.1.tgz",
|
||||
"integrity": "sha512-Fl79+wsLOZKoiU345KeEaWD0ik8WKRI5zm0YSPj2oF1Qr+BO7z0fco6GbUtqjoG1h4VI89PeKJnMsMMVQdKKTw==",
|
||||
"version": "4.6.0",
|
||||
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
|
||||
"integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/bootstrap"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@popperjs/core": "^2.9.2"
|
||||
"jquery": "1.9.1 - 3",
|
||||
"popper.js": "^1.16.1"
|
||||
}
|
||||
},
|
||||
"node_modules/bootstrap-vue": {
|
||||
@ -3889,19 +3880,6 @@
|
||||
"vue-functional-data-merge": "^3.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/bootstrap-vue/node_modules/bootstrap": {
|
||||
"version": "4.6.0",
|
||||
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
|
||||
"integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/bootstrap"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"jquery": "1.9.1 - 3",
|
||||
"popper.js": "^1.16.1"
|
||||
}
|
||||
},
|
||||
"node_modules/brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
|
||||
@ -17085,12 +17063,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"@popperjs/core": {
|
||||
"version": "2.9.2",
|
||||
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz",
|
||||
"integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==",
|
||||
"peer": true
|
||||
},
|
||||
"@soda/friendly-errors-webpack-plugin": {
|
||||
"version": "1.8.0",
|
||||
"resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.0.tgz",
|
||||
@ -18827,9 +18799,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"bootstrap": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.0.1.tgz",
|
||||
"integrity": "sha512-Fl79+wsLOZKoiU345KeEaWD0ik8WKRI5zm0YSPj2oF1Qr+BO7z0fco6GbUtqjoG1h4VI89PeKJnMsMMVQdKKTw==",
|
||||
"version": "4.6.0",
|
||||
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
|
||||
"integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==",
|
||||
"requires": {}
|
||||
},
|
||||
"bootstrap-vue": {
|
||||
@ -18842,14 +18814,6 @@
|
||||
"popper.js": "^1.16.1",
|
||||
"portal-vue": "^2.1.7",
|
||||
"vue-functional-data-merge": "^3.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"bootstrap": {
|
||||
"version": "4.6.0",
|
||||
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
|
||||
"integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==",
|
||||
"requires": {}
|
||||
}
|
||||
}
|
||||
},
|
||||
"brace-expansion": {
|
||||
|
||||
@ -8,8 +8,8 @@
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"bootstrap": "^5.0.1",
|
||||
"bootstrap-vue": "^2.21.2",
|
||||
"bootstrap": "^4.5.2",
|
||||
"bootstrap-vue": "^2.16.0",
|
||||
"core-js": "^3.6.5",
|
||||
"vue": "^2.6.11",
|
||||
"vue-router": "^3.2.0",
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 1.1 KiB |
58
src/App.vue
58
src/App.vue
@ -1,32 +1,50 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<div id="nav">
|
||||
<router-link to="/">Home</router-link> |
|
||||
<router-link to="/about">About</router-link>
|
||||
</div>
|
||||
|
||||
<navbar/>
|
||||
|
||||
<div id="content">
|
||||
<b-container>
|
||||
<router-view/>
|
||||
</b-container>
|
||||
</div>
|
||||
|
||||
<div id="footer">
|
||||
<b-container>
|
||||
<footer-content/>
|
||||
</b-container>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Navbar from "@/components/Navbar";
|
||||
import FooterContent from "@/components/FooterContent";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FooterContent,
|
||||
Navbar
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#content {
|
||||
margin-top: 70px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
#nav {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
#nav a {
|
||||
font-weight: bold;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
#nav a.router-link-exact-active {
|
||||
color: #42b983;
|
||||
#footer {
|
||||
padding: 1em;
|
||||
margin-top: auto;
|
||||
background: #E9ECEF;
|
||||
}
|
||||
</style>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB After Width: | Height: | Size: 21 KiB |
23
src/components/FooterContent.vue
Normal file
23
src/components/FooterContent.vue
Normal file
@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div>
|
||||
<b-row align-h="between">
|
||||
<b-col cols="auto p-0">
|
||||
|
||||
<div><b>Birbnetes</b></div>
|
||||
<div>
|
||||
<router-link :to="{ name: 'About'}">About</router-link>
|
||||
</div>
|
||||
|
||||
</b-col>
|
||||
<b-col cols="auto p-0">
|
||||
<div class="text-center">
|
||||
System status: Cool&Good
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -1,60 +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-router" target="_blank" rel="noopener">router</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>
|
||||
<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>
|
||||
33
src/components/Navbar.vue
Normal file
33
src/components/Navbar.vue
Normal file
@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<div id="navbar">
|
||||
<b-navbar toggleable="sm" type="light" variant="light" fixed="top">
|
||||
|
||||
|
||||
<b-navbar-brand>
|
||||
<b-img src="@/assets/logo.png" height="30" class="pr-2"/>
|
||||
<b>BirbController</b>
|
||||
</b-navbar-brand>
|
||||
|
||||
<b-navbar-toggle target="nav-text-collapse"></b-navbar-toggle>
|
||||
|
||||
<b-collapse id="nav-text-collapse" is-nav>
|
||||
<b-navbar-nav>
|
||||
<b-nav-item :to="{ name: 'Home'}">Home</b-nav-item>
|
||||
<b-nav-item :to="{ name: 'Devices'}">Devices</b-nav-item>
|
||||
<b-nav-item :to="{ name: 'About'}">About</b-nav-item>
|
||||
</b-navbar-nav>
|
||||
</b-collapse>
|
||||
|
||||
</b-navbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Navbar"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -1,6 +1,7 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import Home from '../views/Home.vue'
|
||||
import Devices from '../views/Devices.vue'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
@ -10,6 +11,11 @@ const routes = [
|
||||
name: 'Home',
|
||||
component: Home
|
||||
},
|
||||
{
|
||||
path: '/devices',
|
||||
name: 'Devices',
|
||||
component: Devices
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
name: 'About',
|
||||
|
||||
14
src/views/Devices.vue
Normal file
14
src/views/Devices.vue
Normal file
@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div class="devices">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Devices"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -1,18 +1,10 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<img alt="Vue logo" src="../assets/logo.png">
|
||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import HelloWorld from '@/components/HelloWorld.vue'
|
||||
|
||||
export default {
|
||||
name: 'Home',
|
||||
components: {
|
||||
HelloWorld
|
||||
}
|
||||
name: 'Home'
|
||||
}
|
||||
</script>
|
||||
|
||||
30
vue.config.js
Normal file
30
vue.config.js
Normal file
@ -0,0 +1,30 @@
|
||||
module.exports = {
|
||||
publicPath: "/",
|
||||
chainWebpack: config => {
|
||||
config.module
|
||||
.rule('vue')
|
||||
.use('vue-loader')
|
||||
.loader('vue-loader')
|
||||
.tap(options => {
|
||||
options.transformAssetUrls = {
|
||||
img: 'src',
|
||||
image: 'xlink:href',
|
||||
'b-avatar': 'src',
|
||||
'b-img': 'src',
|
||||
'b-img-lazy': ['src', 'blank-src'],
|
||||
'b-card': 'img-src',
|
||||
'b-card-img': 'src',
|
||||
'b-card-img-lazy': ['src', 'blank-src'],
|
||||
'b-carousel-slide': 'img-src',
|
||||
'b-embed': 'src'
|
||||
}
|
||||
|
||||
return options
|
||||
}),
|
||||
config.plugin('html')
|
||||
.tap(args => {
|
||||
args[0].title = "BirbController"
|
||||
return args
|
||||
})
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user