Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 3c7589b

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /