[vue] 뷰 CLI / 뷰 로더 웹팩(Webpack)

* 뷰 CLI
- 뷰 코어에서 제공하는 CLI 도구
- 커맨드 창에서 명령어로 특정 동작을 수행할 수 있는 도구
- Node.js 필요

- package.json
  vue init 명령어로 프로젝트 생성시 package.json 파일도 생성
  package.json파일은 프로젝트 정보를 담고 있는 설정파일이며 npm 명령어 및 뷰로 애플리케이션을 제작시 필요한 라이브러리 정보포함
  
- node_modules
  웹팩을 빌드하기 위한 바벨(Babel) 및 여러가지 로더 웨백데브서버등 라이브러리 등이 설치된다

 

- 뷰 CLI 프로젝트 구성

  1) 뷰 CLI 설치  npm install -g @vue/cli

  2) 프로젝트생성   vue create 프로젝트명

  3) 관련 라이브러리 설치 npm install

  4) 프로젝트 구동  npm run serve       

* 뷰 로더 / 웹팩(Webpack)
- 뷰 로더는 웹팩에서 지원하는 라이브러리
- .vue 파일을 웹 브라우저가 인식할 수 있는 형태의 파일로 변환
- 웹팩은 웹앱의 자원(HTML,css..)들을 js 모듈로 변환해 하나로 묶어 웹성능을 향상 시켜주는 자바스크립트 모듈 번들러

 

 - package.json 파일에
1) 해당 프로젝트에 라이브러리 파일 다운로드
  npm install 라이브러리명            : 모든 라이브러리 추가
  npm install 라이브러리명 --save     : "dependencies": {} 속성에 라이브러리추가
  npm install 라이브러리명 --save-dev : "devDependencies":{} 속성에 라이브러리추가
2) -global 해당 라이브러리 시스템 레벨에 설치
  npm install 라이브러리명 -global
  npm install 라이브러리명 -g
3) NPM 커스텀 명령어

   "scripts": {} 에 명령어 추가후 npm run 명령어 형식으로 실행 가능

 

참고)

https://cli.vuejs.org/guide/