Vue CLI

NPM (자바스크립트 패키지 관리자)

=> python에 pip가 있다면 Node.js에는 npm

• pip와 마찬가지로 다양한 의존성 패키지 관리
• Node.js 설치 시 함께 설치됨

 

 

Vue CLI

• Vue 개발을 위한 표준 도구
• 프로젝트의 구성을 도와주는 역할
• 확장 플러그인, GUI, Bable등 다양한 tool 제공

 

 

Vue CLI Quick Start

 

설치

$ npm install -g @vue/cli

 

 

프로젝트 생성

• 폴더 생성 후 vscode terminal에서 진행

$ vue create vue-cli

$ vue create (프로젝트명)

생성된 프로젝트 확인

 

 

Vue 버전 선택 (vue 2)

 

 

프로젝트 생성 성공

 

 

프로젝트 디렉토리로 이동

$ cd vue-cli/

 

 

프로젝트 실행

$ npm run serve

 

 

서버 켜기 - ctrl + 주소 클릭

 

 

프로젝트 메인페이지 확인

 

 

 

Vue CLI 프로젝트 구조

 

 

package.json

• 프로젝트의 종속성 목록과 지원되는 브라우저에 대한 구성옵션을 포함

 

 

pakage-lock.json

• node_modules에 설치되는 모듈과 관련된 모든 의존성을 설정 및 관리
• 협업 및 배포 환경에서 정확히 동일한 종속성을 설치하도록 보장하는 표현
• python의 requirements.txt 역할
• 사용 할 패키지의 버전을 고정
• 개발 과정 간의 의존성 패키지 충돌 방지

 

 

public/index.html

• Vue 앱의 뼈대가 되는 html
• Vue 앱과 연결될 요소가 있음

 

 

src/

src/assets	정적 파일을 저장하는 디렉토리
src/components	하위 컴포넌트들이 위치
src/App.vue	최상위 컴포넌트, public/index.html과 연결됨
src/main.js	webpack이 빌드를 시작할 때 가장 먼저 불러오는 entry point -> public/index.html과 src/App.vue를 연결시키는 작업이 이루어지는 곳 -> Vue 전역에서 활용할 모듈을 등록할 수 있는 파일

 

 

 

 

해야 할 고민 가득일 때,  이대로 시간이 멈췄으면 좋겠다는 생각도 가끔 든다. 

고민하는걸 즐기는 편. 맘고생 다이어트나 하고십네ㅎ