Project/Django & Vue.js

Vue 와 Django(DRF) 를 이용하여 Todo 리스트 만들기 - 4 (프론트 환경세팅)

뉴비뉴 2020. 7. 20.

안녕하세요.

오늘은 Vue CLI 를 사용하여 Vue 환경세팅, 설치부터 프로젝트 생성, 구조를 알아보도록 하겠습니다.

맥북을 사용하기 때문에 윈도우에서 발생하는 오류를 대응못하는 점 양해 부탁드립니다.

버전확인

node -v  // 10점대 이상
npm -v  // 6점대 이상

Vue CLI 설치

npm install -g @vue/cli

//권한 에러 발생 시
sudo npm install -g @vue/cli

프로젝트 생성

> vue create todo
> default (bable, eslint)

todo 폴더가 생성되고, 그 안에 여러 폴더들이 생성된 것을 확인할 수 있습니다.

cd todo로 생성 된 폴더 이동 후

yarn serve 혹은 npm run serve 로 서버를 실행시킬 수 있습니다.

localhost:8080 으로 접속하니 Vue의 기본화면 페이지가 보이고 있습니다.

여기서 한가지 기억해야 될 것은 Django Rest Framework Server는 localhost:8000 이고,

Vue.js Servier 는 localhost:8080 이라는 것 입니다.

프로젝트 구조

package.json

yarn serve 또는 npm run serve 는 package.json의 script 부분을 가리킵니다.

serve 라는 명령어를 정의할 수 있습니다.

결국 npm run serve 라는 것은 vue-cli-service serve 라는 것을 실행하는 것과 같습니다.

index.html

서버를 실행시키고, 그 다음으로 바라보는 곳은 index.html 입니다.

<body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>

localhost:8080으로 접속했을 때 기본적으로 생성되는 페이지가 있었습니다.

페이지에 보이는 요소들은 src/ 폴더 내에 component 와 assets, main.js 에 정의되어있고

그 값들은 위 소스코드의 <div id="app"> 아래 생성되게 되어있습니다.

main.js

import Vue from 'vue'
import App from './App.vue' // 싱글파일 컴포넌트 파일

Vue.config.productionTip = false

new Vue({
  render: h => h(App), // 뷰 내부적으로 사용하는 함수
}).$mount('#app')  // el: '#app' 과 동일합니다.

App.vue

<template> // HTML
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <!-- 컴포넌트 명명법 종류
    <hello-world></hello-world>
    <HelloWorld></HelloWorld>
    <HelloWorld/> -->
  </div>
</template>

<script> // Js
import HelloWorld from './components/HelloWorld.vue'

export default {
  // 인스턴스 옵션 or 컴포넌트 옵션 속성
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style> // CSS
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

이렇게 생성 된 프로젝트에 대한 구조를 다 살펴보았습니다.

다음 시간부터는 실제로 Todo 를 만들어보도록 하겠습니다.

Reference

- https://cli.vuejs.org/guide/installation.html

- https://www.inflearn.com/course/Age-of-Vuejs/dashboard

'Project > Django & Vue.js' 카테고리의 다른 글

Vue 와 Django(DRF) 를 이용하여 Todo 리스트 만들기 - 6 (프론트 axios, cors 설정) (0)	2020.07.31
Vue 와 Django(DRF) 를 이용하여 Todo 리스트 만들기 - 5 (프론트 컴포넌트 생성) (0)	2020.07.30
Vue 와 Django(DRF) 를 이용하여 Todo 리스트 만들기 - 3 (백엔드 DRF) (3)	2020.06.09
Vue 와 Django(DRF) 를 이용하여 Todo 리스트 만들기 - 2 (백엔드 Django Model) (0)	2020.06.07
Vue 와 Django(DRF) 를 이용하여 Todo 리스트 만들기 - 1 (백엔드 환경세팅) (0)	2020.06.07

Vue 와 Django(DRF) 를 이용하여 Todo 리스트 만들기 - 4 (프론트 환경세팅)

Reference

'Project > Django & Vue.js' 카테고리의 다른 글

댓글

💲 추천 글

티스토리툴바