3.1 Vue CLI 설치

npm install -g @vue/cli

Vue CLI는 앞으로 Vue 프로젝트를 생성할 때 마다 사용해야하므로 -g(global) 옵션으로 설치한다

3.2 Default 옵션으로 프로젝트 설치하기

3.2.1 Vue 프로젝트 생성

# 문법 : vue create 프로젝트명
vue create vue-project

Default(Vue 3)을 선택한다

3.2.2 Vue 프로젝트 실행

cd vue-project
npm run serve 

기본 8080 포트에서 실행되며, 다른 포트에서 실행을 원할 시 --port 3000 과 같이 옵션을 추가한다

3.2.3 Vue 프로젝트 파일 구조

node_modules : npm으로 설치된 패키지 파일

public : 웹팩(webpack)을 통해 관리되지 않는 정적 리소스

src/assets : 이미지, css, 폰트 등

src/components : Vue 컴포넌트 파일

App.vue : 최상위 컴포넌트

main.js : 가장 먼저 실행되는 JS 파일, Vue 인스턴스 생성

.gitignore : 깃허브 업로드 제외

babel.config.js : 바벨 설정 파일

package-lock.json : 설치된 package의 dependency 정보 관리

package.json : 프로젝트에 필요한 package 정의 및 관리

README.md : 프로젝트 정보 기록

package.json

{
  "name": "vue-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

private : true로 설정 시, 해당 프로젝트를 npm으로 올릴 수 없으며 실수로 올려도 배포를 막을 수 있다

script : 프로젝트 실행과 관련된 명령어 등록. 개발자가 직접 정의한 스크립트는 npm run 명령어로 사용

devDependencies : 프로젝트 배포 시 필요 없는, 개발 시에만 필요한 패키지 정보를 등록한다

3.3 Manually select features 옵션으로 프로젝트 설치하기

vue create vue-project-manually

각 단계별로 적절한 선택지를 골라 프로젝트를 생성한다

3.4 Vue 프로젝트 매니저로 프로젝트 생성

GUI 환경에서 좀 더 쉽게 프로젝트를 생성할 수 있다

vue ui

---

출처: 고승원 저, 『Vue.js 프로젝트 투입 일주일 전』, 비제이퍼블릭(2021)

---