Vue3 프로젝트 생성 - vue/cli 3.10.4

윈도우 커맨드창 ( cmd )를 실행한다. cd 명령어로 프로젝트를 생성하고 싶은 디렉토리로 이동한다.

 

아래 명령어를 입력해 프로젝트를 생성합니다. (vue/cli 버전 3.10.4)

npm create vue@3.10.4

Project name: 원하는 프로젝트 이름을 작성하면 해당 디렉토리가 만들어진다.
Add TypeScript: 타입 스크립트 사용 여부
Add JSX Support: JSX 지원 여부
Add Vue Router for Single Page Application Development: Router 추가 여부
Add Pinia for state management: Pinia 상태 관리 라이브러리 추가 여부
Add Vitest for Unit Testing: 유닛 테스트 도구 추가 여부
Add an End-to-End Testing Solution: End-to-End 테스트 솔루션 추가 여부
Add ESLint for code quality: ESLint 자바스크립트 코드 분석 도구 추가 여부
Add Vue DevTools 7 extension for debugging: 디버깅을 위한 Vue 개발 도구 추가 여부

package.json

{
  "name": "vue-exam",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check \"build-only {@}\" --",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --build --force"
  },
  "dependencies": {
    "pinia": "^2.1.7",
    "vue": "^3.4.29",
    "vue-router": "^4.3.3"
  },
  "devDependencies": {
    "@tsconfig/node20": "^20.1.4",
    "@types/node": "^20.14.5",
    "@vitejs/plugin-vue": "^5.0.5",
    "@vue/tsconfig": "^0.5.1",
    "npm-run-all2": "^6.2.0",
    "typescript": "~5.4.0",
    "vite": "^5.3.1",
    "vue-tsc": "^2.0.21"
  }
}

 

 

생성한 프로젝트 디렉토리로 이동
> cd vue-exam

노드 모듈을 설치
> npm install

프로젝트를 실행합니다.
> npm run dev

Local 내용을 브라우저 주소창에서 실행하면 프로젝트 화면이 나타난다.