1. 프로그램 다운로드 및 설치

VS Code
https://code.visualstudio.com/download

node.js
https://nodejs.org/en/

크롬 브라우저
https://www.google.com/chrome/

크롬 확장 프로그램 Vue.js devtools
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

github 계정생성 및 다운로드
https://github.com/

2. vue-cli 설치

vue 개발 환경을 설정해주는 도구. 프로젝트의 기본적인 세팅을 해준다
=> 폴더구조, lint, 빌드, 라이브러리 구성, 웹팩설정
1번 항목을 수행 및 완료하면 cmd 창을 열어서 vue-cli를 설치 해준다

npm i -g @vue/cli
vue --version

3. 프로젝트 생성

작업을 진행할 폴더를 미리 생성

예) D:\WORKSPACE\vue-training

vue-cli 를 설치하면 vs code 에디터의 터미널에서 프로젝트를 생성할 수 있다 상단 메뉴에 터미널 탭에서 새터미널 활성화 후생성한 작업폴더로 이동하여 하기 명령어를 입력, 설치 수행

vue init webpack-simple 프로젝트명

웹팩 최소 기능을 활용한 프로젝트 구성

4. npm install

node.js 웹개발을 위한 sw 플랫폼
npm은 node packaged manager의 약자로 node.js 에서 사용가능한 모듈을 패키지화 해놓은 것을 사용할 수 있도록 해주는 관리툴.
예를 들자면, node.js - OS / npm - 앱스토어 ??

생성된 프로젝트 위치로 이동하여 라이브러리를 다운받는다

npm i

프로젝트의 package.json에 적힌 모든 패키지를 현재 경로 내 node_modules 폴더에 설치
package-lock.json 파일이 생성되는데 여기에 설치된 패키지 정보가 포함

D:\WORKSPACE\vue-training\todo-app\node_modules

5. 실행

초기 화면 확인

npm run dev

6. 본격 todo app 만들기