Vue3 설치

1. nodejs 최신버전 설치

우측 최신버전이 뭔가 에러가 덜 납니다. 

그래도 에러나면 LTS 왼쪽 버전으로 바꾸실 수 있습니다. 제어판에서 삭제 후 재설치하면 됩니다.

https://nodejs.org/en

Node.js

 

2. VS code 에디터 설치

구글 검색해서 다운받고 설치

 

 

 

 

 

 

3. 아무데나 작업용폴더 만들고 에디터로 오픈

코딩실력이 부끄럽다면 은밀한 곳에 만들어줍니다. 에디터 상단 메뉴에 open folder라고 있을겁니다 그렇게 오픈하셈

 

 

 

▲ 에디터 왼쪽 위에 아까 만든 폴더명이 떠야합니다. 

 

 

 

 

 

4. 에디터에서 터미널 열고 npm install -g @vue/cli 입력

터미널은 에디터 상단 Terminal - New Terminal 누르면 됩니다. 

입력 후에 Vue 3 버전을 방향키 + 엔터로 선택하면 됩니다.

안되면 90%확률로 nodejs 이상하게 설치해서 그렇습니다. 해결책은 하단에 

 

 

 

뭔가 npm 하는거 부터 에러나면

yarn 1.22 버전 구글검색해서 설치하고 윈도우 재시작하고 yarn global add @vue/cli 이거 해보세요

윈도우는 yarn 1.22 인스톨러를 다운받아서 설치하고 컴퓨터 재시작,

맥은 터미널 아무데나 열고 npm install -g yarn 하시면 됩니다.

윈도우는 맥처럼 설치하면 컴퓨터 폭발함 그러지마세요 

 

 

 

 

 

5. 설치가 끝났으면 터미널에서 vue create 프로젝트명 입력

프로젝트명은 자유 작명 가능합니다.

그럼 하위폴더로 프로젝트폴더가 생성됩니다. 

 

 

 

6. 프로젝트명으로 생성된 폴더를 에디터로 오픈 후 코딩시작

하위폴더로 vuedongsan 생성된거 그거 다시 open folder 로 오픈하라는 소리입니다.

폴더오픈 안한채로 코딩하다가 뭐 안된다그러면 혼납니다. 

여러 파일 중 App.vue에다가 코딩 시작하면 됩니다. 

 

 

 

 

7. 미리보고 싶으면 터미널 열고 npm run serve 입력 

위에서 프로젝트 폴더 오픈 안해놨으면 에러가 날 수 있습니다. 

 

 

 

9. VS code 에디터 부가기능을 설치해줍니다

에디터 제일 왼쪽 네모네모 버튼 (Extensions) 누르면 됩니다. Vetur, Vue 3 snippets, HTML CSS Support 이거 세개 설치합니다.