Vue.js - Vue CLI

🔔Vue CLI

|Vue CLI

• Vue.js 개발을 위한 표준 도구
• 프로젝트의 구성을 도와주는 역할을 하며 Vue 개발 생태계에서 표준 tool 기준을 목표로 함
• 확장 플러그인, GUI, Babel등 다양한 tool 제공

 

|Node.js —Django와 비슷, JavaScript

JS =⇒실행기, 프론트엔드/백엔드 둘 다 가능

• 자바스크립트를 브라우저가 아닌 환경에서도 구동할 수 있도록 하는 자바스크립트 런타임 환경
  • 브라우저 밖을 벗어 날 수 없던 자바스크립트 언어의 태생적 한계를 해결
• Chrome V8 엔진을 제공하여 여러 OS 환경에서 실행할 수 있는 환경을 제공
• 즉, 단순히 브라우저만 조작할 수 있던 자바스크립트를 SSR 아키텍처에서도 사용할 수 있도록 함

 

|NPM(Node Package Manage) —Django의 pip와 비슷! 설치 명령어

• 자바스크립트 언어를 위한 패키지 관리자
  • Python에 pip가 있다면 Node.js에는 NPM
  • pip와 마찬가지로 다양한 의존성 패키지를 관리
• Node.js의 기본 패키지 관리자
• Node.js 설치 시 함께 설치됨

 

|Vue CLI Quick Start —손에 익힐 것! (vscode terminal의 Bash 이용)

• 설치 (유의사항 : -g 는 설치 문서에 써있는 경우에만 쓰자! 자의적 판단으로 쓰는 거 결정 금지!)

npm install -g @vue/cli

• 버젼 확인

vue -- version

• 프로젝트 생성

vue create my-first-app

• npm 레지스트리 변경(환경에 따라 나오지 않을 수 있음)

? Your connection to the default npm registry seems to be slow.
Use <https://registry.npm.taobao.org> for faster installation? 

Yes나 y 입력하기!

• Vue버전 선택

• 프로젝트 생성 성공

• 프로젝트 디렉토리 이동

cd my-first-app

• 서버 실행

npm run serve

• 프로젝트 메인 페이지 확인