[Django Tutorial] Blog 만들기 (9)

Vue-Django 연동원리

vuetifyjs.com 에서 pre-made layouts 이용.

App.vue를 수정해준다.

<template>
  <v-app id="inspire">
    <v-navigation-drawer
      v-model="drawer"
      app
      clipped
    >
      <v-list dense>
        <v-list-item link>
          <v-list-item-action>
            <v-icon>mdi-view-dashboard</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title>dashboard</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
        <v-list-item link>
          <v-list-item-action>
            <v-icon>mdi-cog</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title>Settings</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

    <v-app-bar
      app
      clipped-left
      color="indigo" dark
    >

      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
      <v-toolbar-title>Application</v-toolbar-title>
    </v-app-bar>

    <v-main>
      <HelloWorld></HelloWorld>
    </v-main>

    <v-footer app>
      <span>&copy; 2020</span>
    </v-footer>
  </v-app>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue"
  export default {
    components: {HelloWorld},
    props: {
      source: String,
    },

    data: () => ({
      drawer: null,
    }),

    created: () => {
      // this.$vuetify.theme.dark = true
    },
  }
</script>

npm run build 명령을 실행. 

: package.json 에서 확인해보면 scripts 에 build명령은 vue-cli-service build 으로 정의된 것을 볼 수 있음. 

실행하면 배포버전의 파일이 dist 폴더 아래에 생성된다. 이것을 django에 전달해줄 것이다.