Vue.js 설치하기 : 초기세팅

Vue.js 설치하기

---

1. 비쥬얼 스튜디오 들어가기

2. 터미널

• npm install vue
• npm install -g @vue/cli 
• vue --version (버전확인)
• vue create project01 = 폴더생성하기
• 프로젝트 버전을 선택하라고 나옴

vue 2를 실전에서 많이 사용하기도함. 이유는 오픈소스를 가져와 사용하는데 모듈들이 Vue3이 버전이되지 않고 2만 되기에 Vue2로 계속해서 프로젝트를 진행합니다.

Manually select features 은 기본 옵션이 아니라 내가 선택할 수 있는 옵션을 만드는것 = 밑에 설명있음

 

3.설치가 완료되었으면 내 프로젝트로 다시 들어간다

 

• cd (프로젝트명)
• npm run serve

---

Manually select features  설치 📙

1. 내가 프로젝트할때 필요한걸 체크할 수 있는데 화살표 로 움직이고 스페이스로 선택/해제 가능하다.

Babel  =  자바스크립트의 최신문법으로 짤건데.
구브라우저에서는 최신문법이 브라우저에서 동작이 안될수도 있으니
구 브라우저용 자바스크립트 언어로 변환시키는거다.
Progressive web App = 모바일 버전으로 될수있게 하는것 
Router = 메뉴를 구성하고 메뉴를클릭시 화면이동을 할 수 있는것
Vuex = 뷰 컴포넌트내에서 접근가능한 데이터를 저장하고 선택할수있는것
Linter = 프로젝트를 할때 팀원들이 같은 코드 문법을 쓸수있게 하는 코딩컴밴션 모듈
Unit Testing= 단위 기능을 하나하나 테스트할수있는것
E2E Testing = 전체적인 테스팅을 할 수있는 모듈 

 

 

2. 버전 뭐로할래? 라고 물어보는것임  : 나는 3.x

 

3. 코딩을 작성할때 코딩 규칙이 있다 config 그걸 어떤걸 사용할지 묻는다 : 나는 standard config 

Airbnb config = 에어비엔비팀에서 에어비엔비 만들때 코딩 규칙이 있는데 그걸 사용할래?
standard config = 자바스크립트에서 갖고있는 기본 코딩 규칙
Prettier = 확장포맷 버전

 

4. 자바스크립트 문법을 체크해주는건 어떤 시점에서 할래? Lint on save = 코딩을 저장 할때마다 체크

 

5. 앞에 선택한 바벨이나, 라우터 등. 이런것들을 다 별도의 파일을 분리해서 관리할래?

아니면 packge.json에 하나로 관리할래? 물어보는것 = 나는 In package.json 파일로 선택!

6. 앞서 선택한 바벨이나 라우터나 vues나, 이걸 즐겨찾기로 추가해서 바로바로 사용할래? yes

7. 이름은 뭐로할래? : 저는 vue-project 로 정하였습니다 

설치가 완료 되면 설치된 프로젝트로 들어가서 서버를 실행시켜 주면 된다.

cd (프로젝트명
npm run serve 

 

---

위에 초기에 설정하는 것일뿐 즐겨찾기만 해놓으면 실행할때 즐겨찾기 해놓은 모듈로 사용하면 된다.