Vue 3 프로젝트 - 개발 환경

개발 환경

환경	내용
OS	Windows
버전 관리(Version Control)	Git / GitHub
패키지 관리자(Package Manager)	npm
소스 코드 편집기	Visual Studio Code
프론트엔드 프레임워크	Vue (JavaScript)
개발 툴	Vite
백엔드 프레임워크	Express (Node.js)
데이터베이스	SQLite

• Create react app vs Vite
• Use Vite for React Apps instead of CRA

1. Node.js 설치

Node.js 설치시 Node.js 패키지 매니저 도구인 npm이 설치된다.

2. Visual Studio Code 설치

Visual Studio Code Extensions은 별도 작성 예정

3. Git 설치

4. Vue Devtools 설치

기존 Vue.js devtools의 경우, Vue 3를 지원하지 않으므로 Vue 3를 사용하는 경우, 베타 버전을 설치한다.

5. Git 저장소 생성

1. 사용자 정보를 설정한다.

git config --global user.name "UserName"
git config --global user.email "UserId@gmail.com"

2. {폴더명}의 폴더 생성 후, Git 저장소를 생성한다.

git init {폴더명}

3. GitHub Repository와 생성한 Local Repository를 연결한다.

git remote add origin {GitHub Repository 주소}

• Git 기초 버전 관리
• GitHub 기초

5. Vite 프로젝트 생성

1. vite project를 생성한다.

npm create vite@latest

또는

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, '--'를 반드시 붙인다. (프로젝트 명/템플릿 설정)
npm create vite@latest my-vue-app -- --template vue

2. 의존 패키지를 설치한다.

npm install

3. Vite 개발 서버 실행

npm run dev

6. 라이브러리 설치

라이브러리명	버전	명령어
vue-router	^4.0.13	npm install vue-router@4
vuex	^4.0.2	npm install vuex@next
path	^0.12.7	npm install path
bootstrap	^5.2.0	npm install bootstrap@5.2.0
popper	^2.11.5	npm install @popperjs/core
axios	^0.27.2	npm install @bundled-es-modules/axios
js-md5	^0.7.3	npm install js-md5

7. 데이터베이스 서버 생성

데이터베이스 서버를 구축할 폴더 생성 후, 패키지를 설치한다.

npm init

패키지명	버전	명령어
SQLite3	^5.0.11	npm install sqlite3
Express	^4.18.1	npm install express
CORS	^2.8.5	npm install cors