📖 Vue CLI
📌 Vue CLI / NPM
✅ Vue CLI (Command Line Interface : 명령 줄 인터페이스)
-
Vue.js 개발을 위한 표준 도구
-
Vue.js에서 공식으로 제공하는 CLI
-
개발 필수는 아니지만 개발의 편리성을 위해 필수처럼 사용
-
Vue 프로젝트를 빠르게 구성할 수 있는 스캐폴딩 제공
-
Vue와 관련된 오픈 소스들의 대부분이 CLI를 통해 구성이 가능하도록 구현되어 있다.
✅ NodeJS 설치
- NodeJS 설치 - LTS(Long Term Support) 버전 설치 (NPM과 같이 설치됨)
✅ NPM(Node Package Manager)
-
Command에서 third party 모듈을 설치하고 관리하는 툴
-
모듈(패키지) 검색
-
Node.js의 기본 패키지 관리자
✅ NPM 명령어
-
npm init : 새로운 프로젝트나 패키지를 만들 때 사용 (package.json이 생성됨)
-
npm install 패키지 : 생성되는 위치에서만 사용 가능한 패키지로 설치
-
npm install -g 패키지 : 글로벌 패키지 추가, 모든 프로젝트에서 사용 가능한 패키지로 설치
✅ @vue/cli 설치
- 설치
npm install -g @vue/cli- 프로젝트 만들기
vue create my-project
or
vue ui✅ @vue/cli 프로젝트 생성
-
vue create
<project-name> -
ex) vue create vue-first-app
-
실행 중지 : ctrl + c
-
프로젝트 실행 npm run serve
✅ @vue/cli 프로젝트 실행
- 생성한 프로젝트 폴더로 이동 후 실행
✅ Babel is a JavaScript compiler
- ECMA2015+의 문법을 ES5의 자바스크립트 코드로 변경하는 도구
✅ Webpack
-
웹팩은 오픈 소스 자바스크립트 모듈 번들러
-
모듈 간 의존성 문제를 해결하기 위한 도구
-
프로젝트에 필요한 모든 모듈을 매핑하고 내부적으로 종속성 그래프 빌드
✅ Vue Project 구조
-
node_modules
- node.js 환경의 여러 의존성 모듈
-
public
- index.html : Vue 앱의 뼈대가 되는 파일 / 단일 html 파일
- favicon.ico : Vue 아이콘
-
src/assets
- webpack에 의해 빌드 된 정적 파일
-
src/component
- 하위 컴포넌트들이 위치
✅ Vue Project 구조
-
src/App.vue
- 최상위 컴포넌트
-
src/main.js
- webpack이 빌드를 시작할 때 가장 먼저 불러오는 entry point
- 실제 단일 파일에서 DOM과 data를 연결 했던 것과 동일한 작업이 이루어지는 곳
- Vue 전역에서 활용 할 모듈을 등록할 수 있는 파일
-
babel.config.js
- babel 관련 설정이 작성된 파일
-
package-json
- 프로젝트의 종속성 몰곡과 지원되는 브라우저에 대한 구성 옵션
-
package-lock.json
- node_modules에 설치되는 모듈과 관련된 모든 의존성을 설정 / 관리
- 팀원 및 배포 환경에서 정확히 동일한 종속성을 설치하도록 보장
- 사용할 패키지의 버전을 고정
- 개발 과정 간의 의존성 패키지 충돌 방지
📌 Vue SFC
✅ SFC (Single File Component)
- 확장자가 .vue인 파일
- template + script + style = .vue (HTML, CSS, JavaScript 코드를 하나의 파일에서 관리)
- 구문 강조 가능
- 컴포넌트에만 CSS 범위 제한 가능
- 전처리기를 사용해 기능 확장 가능
✅ SFC - <template>
-
기본 언어 : HTML
-
각
*.vue파일은 한번에 최대 하나의<template>블록을 포함할 수 있음 -
내용은 문자열로 추출되어 컴파일 된 Vue 컴포넌트의 template 옵션으로 사용
-
root element가 하나 필요
✅ SFC - <script>
-
기본 언어 : JavaScript
-
각
*.vue파일은 한번에 최대 하나의<template>블록을 포함할 수 있음 -
ES2015(ES6)를 지원하여 import와 export를 사용할 수 있음
✅ SFC - <style>
-
기본 언어 : CSS
-
각
*.vue파일은 여러 개의<style>태그 지원 -
scoped 속성을 이용해서 현재 컴포넌트에서만 사용 가능한 CSS 지정 가능
