728x90
Vuetify 세팅하기
vuetify 세팅하는 방법은 아주 간단하다. 아래 명령어만 날려주면 된다.
$ vue add vuetify
그럼 관련된 dependency가 설치되고 아래 4개의 파일이 수정 및 생성된다.
$ yarn add vuetify
$ yarn add --dev sass sass-loader vue-cli-plugin-vuetify vue-template-compiler vuetify-loader
▷ src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)
▷ public/index.html
<!DOCTYPE html>
<html lang="">
<head>
...
<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>
...
</html>
▷src/main.js
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
Vue.config.productionTip = false
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app')
▷ vue.config.js
module.exports = {
transpileDependencies: [
'vuetify'
]
}
vue-router 세팅하기
▷ src/App.vue
<template>
<v-app id="sandbox">
<v-navigation-drawer v-model="drawer" app mini-variant expand-on-hover dark>
<v-list dense nav class="py-0">
<v-list-item two-line class="px-0">
<v-list-item-avatar>
<img src="@/assets/iuisu.jpeg" />
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>YONIKIM</v-list-item-title>
<v-list-item-subtitle>hoyeon.kim2773@gmail.com</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-divider></v-divider>
<template v-for="(item, i) in menus">
<v-subheader v-if="item.heading" class="text-subtitle-1 d-none" :key="item.title">
{{ item.heading }}
</v-subheader>
<v-divider v-else-if="item.divider" :key="i" dark class="my-4"></v-divider>
<v-list-item v-else :key="i" link :to="item.to">
<v-list-item-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
{{ item.title }}
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
</v-list>
</v-navigation-drawer>
<v-app-bar app dense color="grey lighten-3" style="box-shadow:none">
<v-btn icon @click="drawer = !drawer"><v-icon>mdi-menu</v-icon></v-btn>
<v-spacer class="hidden-xs-only"></v-spacer>
<v-btn icon @click="logout()"><v-icon>mdi-logout</v-icon></v-btn>
</v-app-bar>
<v-main class="grey lighten-3">
<router-view class="mt-0 pt-2 px-4"></router-view>
</v-main>
</v-app>
</template>
<script>
export default {
data: () => ({
menus: [
{
title: '홈',
icon: 'mdi-home',
to: '/home',
},
],
drawer: true,
}),
methods: {
logout() {
this.$router.push('/logout')
},
},
}
</script>
▷ src/components/Home.vue
<template>
<v-container fluid>
<div>HOME</div>
</v-container>
</template>
<script>
export default {
name: 'Home'
}
</script>
▷ src/components/Logout.vue
<template>
<v-container fluid>
<v-row class="align-center justify-center">
<v-col cols="6">
<v-card>
<v-toolbar color="primary" dark>
<v-toolbar-title>로그아웃</v-toolbar-title>
<v-spacer />
</v-toolbar>
<v-card-text>로그아웃 되었습니다</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn @click="login()">로그인</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
data() {
return {}
},
methods: {
login() {
this.$router.push('/')
},
},
}
</script>
▷ src/router/index.js
import VueRouter from 'vue-router'
import Home from '@/components/Home'
import LogoutSuccess from '@/components/Logout'
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/', name: 'Index', component: Home, },
{ path: '/home', name: 'Home', component: Home, },
{ path: '/logout', component: LogoutSuccess, }
]
})
export default router
▷ src/main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import vuetify from './plugins/vuetify'
import App from './App'
import router from './router'
Vue.config.productionTip = false
Vue.use(VueRouter)
new Vue({
vuetify,
router,
render: h => h(App),
}).$mount('#app')
728x90
'Vue.js' 카테고리의 다른 글
| [Vue.js] Jspreadsheet 사용하기 (0) | 2021.05.13 |
|---|---|
| [Vue.js] vue-cookie 사용하기 (0) | 2021.05.13 |
| [Vue.js] jqxGrid 사용하기 (0) | 2021.05.10 |
| [Vue.js] VueJS 프로젝트 시작하기 (0) | 2021.04.27 |
