1. vue-cli 설치

1강 개발환경설정

1. VScode 설치 (Tool)

https://code.visualstudio.com/ 사이트에서 다운로드 후 설치

2. 작업폴더 생성

3. Node.js 설치 

Node.js®는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. Node.js는 이벤트 기반, 논 블로킹 I/O 모델을 사용해 가볍고 효율적입니다. Node.js의 패키지 생태계인 npm은 세계에서 가장 큰 오픈 소스 라이브러리이기도 합니다.

https://nodejs.org/ko/ 사이트에서 다운로드 후 설치

- 작업폴더 VScode 에서 열기 

- 터미널로 열기

: node -v ( node 설치 확인 )

: npm -v ( npm 설치 확인 )

4. vue-cli 설치

에반 유가 공식적으로 관리하는 커맨드라인 인터페이스 기반의 스캐폴딩 도구 이다. 특히, Vue.js 앱을 개발할 때 프로젝트의 폴더 구조를 어떻게 잡을 것인지, 테스트, 빌드, 의존성 부분은 어떻게 설정할 것인지에 대한 고민을 하지 않도록 프로젝트의 기본 템플릿을 설정해주는 도구

https://www.npmjs.com/package/vue-cli

npm install -g vue-cli

vue init webpack my-project ( vue init <template-name> <project-name> )

template-name ( 템플릿 종류 )

vue init webpack	고급 웹팩 기능을 활용한 프로젝트 구성 방식, 테스팅, 문법 검사 등을 지원
vue init webpack-simple	웹팩 최소 기능을 활용한 프로젝트 구성방식, 빠른 화면 프로토타이핑용
vue init browserify	고급 브라우저파리 기능을 활용한 프로젝트 구성 방식, 테스팅, 문법 검사 등을 지원
vue init browserify-simple	브라우저파이 최소 기능을 활용한 프로젝트 구성 방식, 빠른 화면 프로토타이핑용
vue init simple	최소 뷰 기능만 들어간 HTML 파일 1개 생성
vue init pwa	웹팩 기반의 프로그레시브 웹 앱(PWA, Progressive Web App) 기능을 지원하는 뷰 프로젝트

설치시 초기설정

? Project name vue-project

? Project description A Vue.js project

? Author sclim <imse0109@naver.com>

? Vue build standalone

? Install vue-router? Yes

? Use ESLint to lint your code? No

? Set up unit tests No

? Setup e2e tests with Nightwatch? No

? Should we run `npm install` for you after the project has been created? (recommended) npm

cd vue-project

npm run dev

http://localhost:8080