[djang-vue연동] Vue.js 1. 설치부터 시작

 

 

0. 들어가면서

 기본적으로 파이썬은 깔려있다고 가정하고 진행하겠다. 장고와 굳이 같은 폴더에서 할 필요가 없다. 다른 폴더를 만들고 진행해도 무방하다. 우선 가상환경을 만들고 가상환경으로 들어가자.

$ virtualenv venv
$ source venv/script/activate

 

1. Vue.js 설치

$ npm install -g @vue/cli

 이 때 -g 를 적는 이유는 로컬 어디에서등 vue-cli를 요청 할 수 있도록 해주는 명령이라고 생각하면 된다. 그리고 설치 하는데 컴퓨터 사항에 따라 시간이 걸릴 수 있다는 점을 참고하자. vue-cli를 통해 vue.js 응용 프로그램을 만들 수 있다. 여기서 cli이란 해당 프레임워크의 명령어를 통해 컴퓨터가 입력받아 출력해 주는 명령어 인터페이스다.

 

 

2. cli를 이용한 vue.js 앱 만들기

$ vue create vue-for-django

위의 명령어를 치면 아래와 같은 화면이 뜰것이다.

3가지중 첫 번째 것에 > 를 두고 엔터를 누르면 된다. 

 

 

 

3. router 만들기

앱 생성후 만든 앱 폴더로 들어가자.

$ cd vue-for-django

그 후에 라우터를 쓰자.

$ vue add router

]

위와 같은 화면이 뜨면 y를 치고 엔터를 눌러준다. 추가적으로 여러게 뜨더라도 Y를 누르고 엔터를 처준다.

 

 

 

4. 서버 실행하기

$ npm run serve

위와 같은 창이 뜨면 컨트롤을 누르고 마우스로 local을 클릭해주자. 그러면 아래와 같은 창이 뜬다면, 뷰 설치가 완료 됐다고 할 수 있다.

 

위와 같은 화면이 나오면 성공이다. home과 about를 눌러보자. 이동이 잘 된다면 router도 잘 달려 있다는 것을 알 수 있다. 기본 설정은 끝났다.

 

 

5. axios 설치

axios도 쓸 것 같으니 미리 설치를 해놓자.

npm i axios

 

6. 폴더 정리

 위의 구조에서 필요 없는 두가지를 지우자. HelloWorld.vue와 About.vue를 지우자. router는 쓸것이니 일단 두고, Home.vue와 App.vue도 사용할 것이기 때문에 그냥 두자. 그러면 이제 남아있는 파일의 코드를 정리해 보자.

지운 후는 아래와 같을 것이다.

 

7. 코드정리

7.1 Home.vue

지워야 될 부분을 안보이게 처리를 해놨다.

 

7.2 App.vue

한 줄만 지우고 일단은 나머지 설정을 그대로 두자.

 

7.3 index.js

위의 사진을 보면 router에도 home만 남겨 둔다.

 

 

서버를 켜보면 아래와 같이 깔끔하게 정리되어 있다는 것을 알 수 있다.

 

---

기본설정이 끝났다. 이제 본격적으로 코드를 작성해 보자.