개발환경 셋팅과 Vue3 설치

 

0:00 개발환경 셋팅

1:34 Vue 프로젝트 생성

4:49 했던거 설명시간

 

 

 

Vue 개발을 위한 개발환경 셋팅과 프로젝트 생성을 해보도록 합시다.

- 맥이나 윈도우나 똑같음

- 예전엔 Vue-CLI를 이용해서 프로젝트 생성했는데 지금은 Vite을 이용합니다.

 

 

 

 

개발환경 셋팅은

 

 

 

1. nodejs 설치

구글에 nodejs 검색 후 LTS라고 써있는 버전을 다운받아 설치합니다.

- 맥북 m1 등 ARM CPU를 쓰는 컴퓨터는 ARM64라고 써있는 버전을 찾아서 다운받읍시다.

- 설치 경로는 바꾸지말고 그대로 쓰는게 좋습니다.

- 설치 중 chocolatey 어쩌구는 설치 안해도 됩니다.

 

 

 

2. VSCode 에디터 설치

구글 검색해서 다운받고 설치하도록 합시다.

 

 

 

 

 

3. VSCode 에디터 확장기능 설치

에디터 왼쪽 Extension 메뉴에서 Vue Official 확장기능을 검색해서 설치해줍시다.

그래야 Vue파일 코드 하이라이트가 가능합니다.

 

 

 

 

 

프로젝트 생성은

 

 

 

1. 아무데나 작업용폴더 만들기

바탕화면 이런데 만들어봤습니다.

(참고1) 윈도우는 onedrive 이런 곳 안에 넣으면 안됩니다.

(참고2) 요즘은 한글 폴더명은 잘 안될 수 있습니다.

 

 

 

 

 

2. 폴더에 shift + 우클릭해서 여기서 powershell 열기를 누릅니다.

맥북은 손가락 두개 클릭해서 터미널열기 누르면 됩니다. 

그럼 터미널이라는게 나오는데

 

npm create vue@latest 

이런거 입력하고 엔터치면 Vue 프로젝트 생성이 가능합니다.

 

 

 

▲ 그 후에 프로젝트 이름짓고, 이거저거 고르라고 하면 대부분 No 고르고

그 다음에 cd 어쩌구 그리고 npm install 명령어가 나올텐데

그거 차례로 터미널에 입력하면 프로젝트 생성 끝입니다.

 

 

 

 

 

 

3. 에디터에서 프로젝트 폴더 오픈

프로젝트 설치했으면 프로젝트 이름의 폴더가 하나 생성되는데 (저는 vuedongsan)

에디터 켠 다음에 File - Open Folder 눌러서

vuedongsan 프로젝트 폴더를 오픈해서 코드짭시다.

 

 

 

4. 내 사이트를 브라우저로 미리보기 띄우고 싶으면 

에디터 상단메뉴중에 Terminal - New Terminal 누릅니다. 

그리고 npm run dev 입력 후 엔터치면 됩니다.

그럼 URL이 하나 뜰텐데 브라우저 주소창에 입력해서 접속해보면 됩니다.

참고로 vuedongsan같은 프로젝트명이 터미널에 안뜨면 폴더오픈을 제대로 안한것이니 폴더 오픈부터 잘하십쇼

vue cli를 이용해 설치했던 구버전은 npm run serve 입력했었습니다.

 

이제 메인페이지인 App.vue에 코드짜면 됩니다.

다음 시간에 부동산 허위매물 파는 사이트를 만들어볼 것인데

그 전에 css 파일들에 있는 내용은 지우고 + App.vue는 하단 내용으로 바꿔서 깔끔하게 시작합시다.

 

 

<template>
</template>

<script>
export default {
  name : 'App',
  components : {
  }
}
</script>

<style>
</style> 

 

 

 

 

 

 

파일/폴더 설명

 

node_modules 폴더 : 설치한 라이브러리의 소스코드 보관 폴더

public 폴더 : 데이터파일 이미지파일 등 쓸데없는 파일 보관소 (여기 넣으면 나중에 사이트 발행시 원본 보존가능)

package.json : 설치한 라이브러리 기록용 파일

어쩌구.config.js : Vite 설정 바꿀 때 열어보는 파일

index.html : 메인페이지인데 App.vue 내용을 main.js에 넣고 그걸 index.html에 넣는 식으로 짜여져있음

 

 

 

 

 

자주 겪는 에러들

 

Q. "npm command not found 어쩌구" 에러

- 에디터 껐다 켜보기

- 대부분 nodejs 제대로 설치 안했거나 옛버전이라 그럴 수 있습니다.

- 맥북이면 brew 그런거 쓰지 말고 다운받읍시다. 

- 요즘 한글 폴더명은 잘 안됩니다.

- 윈도우는 onedrive 같은 곳에 작업폴더 만들지 맙시다.

 

 

 

Q. npm install, npm run dev 명령시 뭔가 이상해요

폴더명에 있는 한글을 제거해봅시다.

 

 

 

Q. 맥북인데 "permission이 없어요" 에러

npm 명령어 왼쪽에 sudo를 붙여봅시다.

그러니까 sudo npm 어쩌구저쩌구 입력해보면 됩니다.

비번입력하라고 하면 맥북 비번 입력하면 됩니다. 

 

 

Q. 윈도우인데 "허가되지 않은 스크립트 입니다 어쩌구~" 에러

윈도우 하단 검색메뉴에서 Powershell 검색 - 우클릭 - 관리자 권한으로 실행한 뒤

Set-ExecutionPolicy RemoteSigned 입력합시다.

그 다음에 뭐 동의하라고 하면 y 누르고 엔터칩시다.

그리고 터미널 껐다 켜서 npm 명령어 다시 시도해봅시다.

 

 

 

Q. The engine "node" is incompatible with this module 에러 

nodejs 버전이 낮거나 너무 높다는 뜻이며 

nodejs를 에러메세지에서 요구하는 버전으로 재설치하면 됩니다.

 

 

Q. npm 어쩌구 입력시 여전히 안되면 

https://imspear.tistory.com/31 이런거 참고해서 환경변수 등록해봅시다. 

 

 

Q. 윈도우인데 아직도 터미널에서 뭐 하는거 안되면 

- 이상한 보안프로그램 끄십시요 특히 Ahnlab security 어쩌구 

- 작업폴더에 들어간 후 상단메뉴에서 파일 - Powershell 열기 - 관리자권한으로 열기 누른 다음

거기서 npm 어쩌구 명령어 입력해봅시다.