할수있다!긍정왕

# Vuel CLI 

CLI는 터미널에 명령어를 통해 컴퓨터와 상호작용

터미널을 이용하여 Vue 프로젝트를 생성하고, 관리하고,빌드하는 기능

Vue 프로젝트의 폴더 구조,필요한 파일들 기본설정 옵션을 명령어를  통해 자동으로 만들어줌

1.npm을 이용하여 Vue/cli 설치

sudo npm install -g @vue/cli

    -- -g (전역으로 설치 하겠다는 이야기) 따라서 윈도우 정보 admin 를 입력해줘야함 

       admin상태일 경우 sudo 없이 npm install -g @vue/cli

Vue 생성하는 방법 3가지

1. Default 옵션으로 생성하기                      

2. Manually select features 옵션으로 생성하기

3. Vue 프로젝트 매니저로 생성하기

1.Default 옵션으로 생성하기

  1.1 vue create vue-default 로 설치

     1.1.1 아래와 같은 오류일 경우  ==> vue.cmd create vue-default로 설치 

Default 일 경우 --> Router가 없음

Manually일 경우

--> Router 설치 O

--> Vue는 기본 Hash모드 

Hash모드는 url 뒤에 #이 붙는다.

History모드는 url 뒤에#이 붙지 않음

[Vue Router에서 HashMode VS History Mode차이점 참고] https://happy-coding-day.tistory.com/128 

 $ cd vue-default (내가 생성한 파일)로 이동 
 $ npm run serve (서버실행)

vue 파일 생성시 설치된 프로젝트 구조

--node_modules  : npm 으로 설치된 패키지 파일들이 모여 있는 디렉토리

--public : Webpack을 통해 관리되지 않는 정적 리소스가 모여 있는 디렉토리 

--src/assets : 이미지,css, 폰트 등을 관히하는 디렉토리

--src/components : Vue 컴포넌트 파일이 모여 있는 디렉토리

-- App.vue : 최상위(Root) 컴포넌트

--main.js : 가장 먼저 실행되는 자바스크립트 파일로써, Vue 인스턴스를 생성하는

                      역할을 담담

--gitignore : 깃허브에 업로할 때 제외할 파일 설정

--babel.config.js : 바벨 설절 파일

--package-lcok.json : 설치된 package의 디펜던시 정보를 관리하는 파일

--package.json : 프로젝트에 필요한 package를 정의하고 관리하는 파일

--ReadMe.md : 프로젝트 정보를 기록하는 파일

2. Manually select features 옵션으로 생성하기

 2.1 vue.cmd create vue-mannually로 설치 

스페이스바 누른후 선택

Choose Vue Version : Vue 버전을 선택

Bable : 

TypeScript : Vue에서 TyprScipt를 이용할때  

Progressive Web App(PWA) Support :  Web App기능을 지원

Router :Vue Router

Vuex : Vue 패키지 

CSS Pre-processors : css  전 처리패키지

Linter/ Formatter :

Unit Testing 

E2E Testing : 

-- Vue Option 선택지 였던 부분 차례대로 선택을 하게 됨

버전 3를 이용해서 해봄

Airbnb config : Airbnb에서 만든 표준 가이드

여기서는 Standard cofig 로 해서 사용함.

Lint on save 클릭함

각각의 config 파일로 할것인가를 설정하는 것인데 In Package.json으로 설정

동의한 프로세스대로 만들건가? yes 

preset 이름으로 Vue-baic으로 만들어서 앞으로 저 설정된 부분대로 파일을 편리하게 설정 할수 있음 

프로젝트 생성 후 PreSet이 잘 생성 되었는지 확인 해 볼려면 다른 파일을 생성을 하려면 옵션으로 내가 선택한 Preset이 생성된 것을 볼 수 있다.

3. Vue 프로젝트 매니저로 생성하기

3.1 vue.cmd ui 명령어 

localhost:8000번으로 들어가봄 

이런식으로 프로젝트를 클릭하여 만들 수 있음 (Vue-Basic과 동일하게 처리)