Vue 3 Install & Setting

 

✅ Node.js 최신버전 설치 - 20.0.0 설치함

 

npm을 사용하기 위해 설치한 것

 

설치시 경로는 건드리지 말 것

 

https://nodejs.org/ko

Node.js

 

✅ vscode 실행

 

✅ 터미널에 입력

 

npm install -g @vue/cli : vue 프로젝트 생성을 한 큐에 할 수 있게 해준다
>>> -g : 컴퓨터 어디서든 설치하고 있는 도구를 사용할 수 있게 해주는 옵션 명령어
>>> 안 되면 yarn으로 (yarn : npm 보다 가볍고 빠르게 자바스크립트 패키지를 관리 할 수 있게 해주는 자바스크립트 패키지 매니저 툴)
>>> 안 되면 nodejs 삭제 후 재설치

 

 

✅ 프로젝트 폴더 생성

 

nodejs 설치가 완료되지 않으면 create 명령어가 먹히지 않는다

 

vue create <프로젝트명>

 

 

 

✅ 왼쪽 Extentions에서 Vetur, Vue 3 Snippets, HTML CSS Support 설치

 

 

✅ 프로젝트명으로 생성된 폴더를 오픈해 시작

 

App.vue에서 작성하면 된다

 

• node_modules : 프로젝트에 쓰는 라이브러리들
• src : 소스코드 전부 담는 곳
• public : html 파일, 기타 파일 보관
• package.json : 라이브러리 버전, 프로젝트 설정 기록

 

vuedongsan

 

✅ 미리보기 띄우기

 

npm run serve

 

 

 

왼쪽 아래 NPM SCRIPTS에서 serve 오른쪽의 Run 버튼을 눌러도 되고

 

터미널에 뜬 링크를 ctrl + click을 해도 된다

 

NPM SCRIPTS가 보이지 않는다면 위의 EXPLORER 옆의 점 세개를 눌러 체크!

 

Vue

 

---

 

출처