Vue로 어플리케이션 만들기_ Todo List(1)

1. 개발환경 셋팅

먼저 Vue-CLI를 이용하기 위해서는 Node.js와 NPM이 설치되어있어야 합니다.

 1) NODE 설치 페이지 (https://nodejs.org/ko/)

오른쪽 최신버전 보다는,

안전한 왼쪽 버전을 더 추천합니다.

 

 

 

 

 

 

 2) 다운로드가 끝나면, 윈도우 + R 키를 눌러서 터미널 창을 열어 node  --version 명령어로 설치를 확인합니다.

 3) 터미널 창 내부에서 npm install vue를 입력하여 Vue 설치.

    이어서 npm install -g @vue/cli를 입력하여 vue-cli를 설치

 4) Vue --version명령어로 vue의 정상 설치를 확인합니다.

 

2. Vue-CLI를 이용하여 프로젝트 생성

 1) CMD 창에서 프로젝트로 생성할 경로로 이동합니다.

     만약 C드라이브의 workspace 디렉토리 밑에 프로젝트를 생성하고 싶다면, cd C:\workspace로 이동하면 됩니다.

 

     그리고 해당 경로로 들어간 후, 다음의 명령어를 입력하여 프로젝트를 생성합니다.

vue create [생성할 프로젝트 명]

위 명령어를 입력하면 default 설정을 따를지 물어보는데 이는 생성 이후에도 변경이 가능한 부분이기 때문에 default를 선택합니다. 마지막으로 Successfully created peoject.... 메세지가 보이면 생성이 완료된 것 입니다.

 

cmd 창을 통해서 간단하게 실행을 시키는 명령어는, 

cd [프로젝트 디렉토리 명]
npm run serve

 

여기까지하면 vue에 대한 모든 설치가 끝이 납니다.

3번째 Quasar framework에 대한 설치는 선택사항입니다.

 

 

3. Quasar Framework 설치 및 설정

 1) Visual Studio Code의 Terminal에 Quasar을 설치하는 명령어를 입력합니다.

    ▶ npm install -g @quasar/cli

 

 2) Quasar Framework 설치가 끝나면, cmd 창을 열어 Quasar 프로젝트를 생성해주도록 합니다.

    ▶ quasar create [프로젝트명]

 

그러면 Quasar 로고와 함께 프로젝트 설정값들을 입력해 프로젝트에 대한 설정을 진행합니다.

설정 값에 대한 것들은 

https://programforlife.tistory.com/69 님의 블로그를 참고하였습니다.

 

 3) 프로젝트가 생성되고 난 후, 다음의 명령어로 프로젝트를 시작할 수 있습니다.

cd [프로젝트 명]
quasar dev