26. Vue CLI 소개 및 설치 시 문제 해결

freejia·2021년 10월 18일
0

야금야금 Vue.js

목록 보기
25/29

캡틴판교 장기효님의 Vue.js시작하기 인프런 강의를 수강하고 내용을 정리했다.
매일 20분 야금야금 Vue.js 화이팅.

IDE: Visual Studio Code
크롬 뷰 개발자 도구: Vue.js devtools


Vue CLI(command line interface)

CLI는 명령어를 통한 특정 액션을 수행하는 도구이다.
Vue CLI 공식문서 - 설치페이지

1. 새 터미널을 켠다. (Visual Studio Code IDE기준)

2. node와 npm 버전을 확인하자.

공식 홈페이지에 노드 버전 요구사항이 적혀있다.
2021년 10월 18일 기준, 노드 버전 요구사항은 아래와 같다.

Vue CLI 4.x에는 Node.js 버전 10.x 대를 권장

홈페이지를 확인하고 터미널에 아래 명령으로 버전을 확인하자.

node -v
npm -v


버전이 안맞는다면 update 하여 맞춰주자.

3. npm으로 vue cli를 설치하고 설치 버전을 확인한다.

설치 명령

npm install -g @vue/cli
# OR
yarn global add @vue/cli

설치된 버전 확인

vue --version

참고) 설치 시, permission(권한) 문제로 에러가 난다면

sudo npm install -g @vue/cli

npm이란 ?

npm은 Node Packeged Manager의 약자다.
npm은 node.js로 만들어진 모듈을 관리하는 툴이다.
자바스크립트 런타임 환경 Node.js의 기본 패키지 관리자이다.
npm install 모듈이름 과같은 간단한 터미널 명령으로 웹에서 모듈을 다운로드 할 수 있다.
"package.json" 파일을 통해 프로젝트 정보와 패키지의 dependency를 관리한다.

참고) npm 패키지들은 어디에 설치 될까

where vue
npm list -g 

터미널 명령어를 통해 npm 패키지 설치 위치를 확인하자.


CLI로 프로젝트 생성하기

1. 프로젝트 생성 명령어

vue-cli 이름으로 프로젝트를 생성하자.

vue create [프로젝트 폴더 위치]
vue create vue-cli

이 때, [Vue 2]라고 된 Default 를 선택하기

2. 프로젝트 실행

cd vue-cli
npm run serve

로컬 8080 포트에서 뷰 서버가 실행됬다고 출력된 터미널

프로젝트 구조

npm start serve 라는게 뭘까

프로젝트 의존성 도구를 정의한 package.json을 열어보자.
"serve" 라는 프로젝트를 실행하는 스크립트가 정의되어 있음을 알 수 있다. 이것은 이미 Vue가 정의한 내용이다.
npm start serve는 프로젝트를 실행하는 스크립트를 실행한 명령어라고 이해하면 된다.

3. [중요] index.html

built files will be auto injected

"빌드된 파일들이 주입된다." 는 주석 위치를 보자.

서버를 실행했을 때, src 디렉터리 하위에 있는 파일들이 묶여서 하나의 파일로 변환되어 이 자리에 주입된다.
배포 단계에서 Webpack이라는 개념을 이해해야 하는데, 시간을 들여 반드시 공부하도록 하자.

4. main.js

사용하는 모듈과 컴포넌트들을 import 해서 화면에 렌더링 하는 설정파일이다.

$mount

app이라는 아이디를 가진 태그에 붙이겠다는 것이다.

render

템플릿을 정의했을 때 내부적으로 render()함수가 정의된다.
App이라는 컴포넌트의 내용을 불러와서 랜더링 하겠다는 의미이다.


궁금한점 npm과 maven은 비슷한 기능일까?

https://stackoverflow.com/questions/38388824/is-maven-similar-to-npm


다음시간에는 싱글 파일 컴포넌트를 배운다.

profile
코딩 리딩 라이딩💛

0개의 댓글