Skip to content

Commit 3c7589b

Browse files
bage2014bage2014
committed
menu
1 parent 3270475 commit 3c7589b

File tree

8 files changed

+277
-6
lines changed

8 files changed

+277
-6
lines changed

‎config/index.js‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,5 +72,32 @@ module.exports = {
7272
// `npm run build --report`
7373
// Set to `true` or `false` to always turn it on or off
7474
bundleAnalyzerReport: process.env.npm_config_report
75-
}
75+
},
76+
77+
rules: [
78+
{
79+
test: /\.s(c|a)ss$/,
80+
use: [
81+
'vue-style-loader',
82+
'css-loader',
83+
{
84+
loader: 'sass-loader',
85+
// Requires sass-loader@^7.0.0
86+
options: {
87+
implementation: require('sass'),
88+
fiber: require('fibers'),
89+
indentedSyntax: true // optional
90+
},
91+
// Requires sass-loader@^8.0.0
92+
options: {
93+
implementation: require('sass'),
94+
sassOptions: {
95+
fiber: require('fibers'),
96+
indentedSyntax: true // optional
97+
},
98+
},
99+
},
100+
],
101+
},
102+
]
76103
}

‎package-lock.json‎

Lines changed: 108 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@
1515
},
1616
"dependencies": {
1717
"vue": "^2.5.2",
18-
"vue-router": "^3.0.1"
18+
"vue-router": "^3.0.1",
19+
"vuetify": "^2.2.21"
1920
},
2021
"devDependencies": {
2122
"autoprefixer": "^7.1.2",
@@ -37,6 +38,7 @@
3738
"copy-webpack-plugin": "^4.0.1",
3839
"cross-spawn": "^5.0.1",
3940
"css-loader": "^0.28.0",
41+
"deepmerge": "^4.2.2",
4042
"eslint": "^4.15.0",
4143
"eslint-config-standard": "^10.2.1",
4244
"eslint-friendly-formatter": "^3.0.0",
@@ -47,6 +49,7 @@
4749
"eslint-plugin-standard": "^3.0.1",
4850
"eslint-plugin-vue": "^4.0.0",
4951
"extract-text-webpack-plugin": "^3.0.0",
52+
"fibers": "^4.0.2",
5053
"file-loader": "^1.1.4",
5154
"friendly-errors-webpack-plugin": "^1.6.1",
5255
"html-webpack-plugin": "^2.30.1",
@@ -61,6 +64,8 @@
6164
"postcss-loader": "^2.0.8",
6265
"postcss-url": "^7.2.1",
6366
"rimraf": "^2.6.0",
67+
"sass": "^1.26.3",
68+
"sass-loader": "^8.0.2",
6469
"selenium-server": "^3.0.1",
6570
"semver": "^5.3.0",
6671
"shelljs": "^0.7.6",

‎src/App.vue‎

Lines changed: 36 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,45 @@
11
<template>
22
<div id="app">
3-
<img src="./assets/logo.png">
4-
<router-view/>
3+
<!-- App.vue -->
4+
5+
<v-app>
6+
<v-navigation-drawer app>
7+
<!-- -->
8+
<nav-menu></nav-menu>
9+
</v-navigation-drawer>
10+
11+
<v-app-bar app>
12+
<!-- -->
13+
</v-app-bar>
14+
15+
<!-- Sizes your content based upon application components -->
16+
<v-content>
17+
18+
<!-- Provides the application the proper gutter -->
19+
<v-container fluid>
20+
21+
<!-- If using vue-router -->
22+
<router-view></router-view>
23+
</v-container>
24+
</v-content>
25+
26+
<v-footer app>
27+
<!-- -->
28+
</v-footer>
29+
</v-app>
530
</div>
631
</template>
732

833
<script>
9-
export default {
10-
name: 'App'
34+
35+
import NavMenu from '@/components/NavMenu'
36+
37+
38+
export default {
39+
name: 'App',
40+
components: {
41+
'nav-menu': NavMenu,
42+
},
1143
}
1244
</script>
1345

‎src/components/NavMenu.vue‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<template>
2+
<v-card
3+
height="800"
4+
class="overflow-hidden"
5+
>
6+
<v-navigation-drawer
7+
v-model="drawer"
8+
:color="color"
9+
:expand-on-hover="expandOnHover"
10+
:mini-variant="miniVariant"
11+
:right="right"
12+
:src="bg"
13+
absolute
14+
dark
15+
>
16+
<v-list
17+
dense
18+
nav
19+
class="py-0"
20+
>
21+
<v-list-item two-line :class="miniVariant && 'px-0'">
22+
<v-list-item-avatar>
23+
<img src="https://randomuser.me/api/portraits/men/81.jpg">
24+
</v-list-item-avatar>
25+
26+
<v-list-item-content>
27+
<v-list-item-title>Application</v-list-item-title>
28+
<v-list-item-subtitle>Subtext</v-list-item-subtitle>
29+
</v-list-item-content>
30+
</v-list-item>
31+
32+
<v-divider></v-divider>
33+
34+
<v-list-item
35+
v-for="item in items"
36+
:key="item.title"
37+
link
38+
>
39+
<v-list-item-icon>
40+
<v-icon>{{ item.icon }}</v-icon>
41+
</v-list-item-icon>
42+
43+
<v-list-item-content>
44+
<v-list-item-title>{{ item.title }}</v-list-item-title>
45+
</v-list-item-content>
46+
</v-list-item>
47+
</v-list>
48+
</v-navigation-drawer>
49+
</v-card>
50+
</template>
51+
<script>
52+
export default {
53+
data () {
54+
return {
55+
drawer: true,
56+
items: [
57+
{ title: 'Dashboard', icon: 'mdi-view-dashboard' },
58+
{ title: 'Photos', icon: 'mdi-image' },
59+
{ title: 'About', icon: 'mdi-help-box' },
60+
],
61+
color: 'teal',
62+
colors: [
63+
'primary',
64+
'blue',
65+
'success',
66+
'red',
67+
'teal',
68+
],
69+
right: true,
70+
miniVariant: false,
71+
expandOnHover: false,
72+
background: false,
73+
}
74+
},
75+
computed: {
76+
bg () {
77+
return this.background ? 'https://cdn.vuetifyjs.com/images/backgrounds/bg-2.jpg' : undefined
78+
},
79+
},
80+
}
81+
</script>

‎src/main.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,15 @@
33
import Vue from 'vue'
44
import App from './App'
55
import router from './router'
6+
import vuetify from '@/plugins/vuetify' // path to vuetify export
67

78
Vue.config.productionTip = false
89

910
/* eslint-disable no-new */
1011
new Vue({
1112
el: '#app',
1213
router,
14+
vuetify,
1315
components: { App },
1416
template: '<App/>'
1517
})

‎src/plugins/vuetify.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// src/plugins/vuetify.js
2+
3+
import Vue from 'vue'
4+
import Vuetify from 'vuetify'
5+
import 'vuetify/dist/vuetify.min.css'
6+
7+
Vue.use(Vuetify)
8+
9+
const opts = {}
10+
11+
export default new Vuetify(opts)

0 commit comments

Comments
 (0)