Vue.js 기초 - 프로젝트 생성

Vue CLI로 Vue 프로젝트 생성하기

vue 프로젝트 생성에는 크게 3가지 방법이 있다.

Vue CLI 설치

터미널에 다음과 같이 입력하여 Vue CLI 설치

NPM은 오픈소스 라이브러리를 패키지 형태로 바로 설치해서 사용할 수 있게 해주는 도구.

NPM에 등록된 패키지는 npm install [패키지명] 을 통해 설치할 수 있다. 패키지 설치할 때 사용할 수 있는 옵션 중 2가지는

-g(global)

npm install -g 패키지명

-g 옵션을 사용하면 설치하는 패키지가 현재 디렉토리 뿐만 아니라 앞으로 생성하게 되는 모든 프로젝트에서 사용할 수 있는 global 패키지로 등록된다. Vue CLI는 앞으로 Vue 프로젝트를 생성할 때마다 사용해야 하므로 -g로 설치한다.

–save

npm install 패키지명 –save

현재 작업중인 디렉토리 내에 있는 ./node_modules에 패키지를 설치한다. 그 다음에 package.json 파일에 있는 dependencies 객체에 지금 설치한 패키지 정보를 추가한다. 설치되는 모든 패키지는 node_modules 디렉토리에 설치된다. node_modules 디렉토리에서 현재 사용하고 있는 모든 패키지를 확인할 수 있다.

실무에서 프로젝트를 계속 개발하다 보면 설치된 패키지가 굉장히 많아진다. 만약 다른 팀원과 공동 작업을 하고 있다면 매번 패키지 파일을 전체 공유하는 일이 자원 낭비가 될 수 있다. 그래서 패키지를 설치할 때 –save 옵션을 사용한다.

–save 옵션을 사용하면 package.json 파일에 설치한 패키지 정보가 추가된다. 이렇게 패키지 정보를 추가한 package.json 파일을 팀원들에게 공유하면 명령어 npm install을 입력하여 현재 내 프로젝트 디렉토리에 없는 패키지 전체를 한번에 설치할 수 있다. 이 방식을 이용하면 깃허브 같은 코드 레파지토리에 패키지 파일을 업로드를 할 필요가 없다.

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

Vue 프로젝트 생성

명령어 vue create 프로젝트명을 실행.

Vue 프로젝트 설치 옵션이 나온다.

방향키를 이용해서 Default(vue 3)를 선택하고 엔터

다음과 같이 뜨면 설치 완료

Vue 프로젝트 실행

vue 프로젝트로 이동.

npm run serve을 입력하여 서버 실행. 프로젝트는 기본 포트인 8080(http://localhost:8080/)으로 실행된다…고 알고 있는데

이미지처럼 8081포트로 세팅됨. why? default 포트넘버로 알고있는데 이부분은 이상하네..

기본 포트 외에 다른 포트를 사용하려면 npm run serve -- --port 포트번호 명령어로 직접 포트번호 지정 가능. 3000번 포트로 실행하려면 npm run serve – –port 3000.

웹 브라우저에 http://localhost:8081/ 으로 이동하면 다음과 같은 화면이 열린다. 이 화면이 보이면 vue 프로젝트가 정상적으로 설치된 것.

그런데 vs Code에서 vue-project 들어가면 npm 명령어 안먹는다?

이건 환경변수 등록해야 함.

C:\Users\ksh95\AppData\Roaming\npm

Vue 프로젝트 파일 구조

• node_modules : npm으로 설치된 패키지 파일들이 모여있는 디렉토리
• public:웹팩(webpack)을 통해 관리되지 않는 정적 리소스가 모여 있는 디렉토리
• src/assets:이미지, css, 폰트 등을 관리하는 디렉토리
• App.vue: 최상위(Root) 컴포넌트
• main.js: 가장 먼저 실행되는 자바스크립트 파일로써, Vue 인스턴스를 생성하는 역할
• .gotognore:깃허브에 업로드 할 때 제외할 파일 설정
• babel.config.js:바벨(babel) 설정파일
• package-lock.json: 설치된 package의 dependensy 정보를 관리하는 파일
• 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.8.3",
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

• name : 프로젝트 이름 입력
• version : 프로젝트 버전
• private : 이 옵션을 true로 설정하면 해당 프로젝트를 npm으로 올릴 수 없음. 개발자가 실수로 해당 프로젝트를 npm에 올리더라도 이 옵션이 true라면 배포를 막을 수 있음.
• script : 프로젝트 실행과 관련된 명령어 등록. 프로젝트 실행, 빌드 등과 같이 프로젝트 개발, 운영 시 사용되는 다양한 script 명령어를 등록하고, 쉽게 사용할 수 있다. 개발자가 직접 정의한 script는 npm run 명령어로 사용하고, npm에서 제공되는 명령어는 npm 명령어로 사용합니다.
• dependencies : 사용 중인 패키지 정보를 입력
• devDependencies : 프로젝트 배포 시 필요 없는, 개발 시에만 필요한 패키지 정보가 등록되는 곳.
• eslintConfig : ESLint는 일관성 있게 코드를 작성하고 버그를 식별할 목적으로 ECMAScript/javascript 코드에서 발견된 패턴을 개발자에게 알려주는 플러그인

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

위 방식은 Vue CLI Default 옵션으로 프로젝트 생성. 이번에는 manually select 옵션을 이용해서 프로젝트를 설치하는 방법.

프로젝트 생성

vue create vue-project-manually 입력

설치 옵션에서 Manually select feature 선택

필요한 옵션 선택

필요한 옵션 선택 후 preset 이름 입력하면 다음부턴 같은 옵션의 프로젝트 생성 가능

vue 프로젝트 매니저로 프로젝트 설치

이번에는 CLI가 아닌 CUI 환경에서 설치하는 방법

Vue 프로젝트 매니저 실행

터미널에서 vue ui 입력

브라우저가 열리면서 8000포트로 Vue 프로젝트 매니저가 실행된다. 프로젝트 매니저로 생성한 프로젝트가 없기 때문에 프로젝트 메뉴에는 프로젝트가 없다.

Vue 프로젝트 생성

프로젝트 만들기 버튼 클릭, 패키지 옵션 선택 후 다음. vue CLI 생성으로 만들때 보였던 프리셋 목록이 보인다.

수동으로 클릭

다음처럼 세팅

프로젝트 생성하면 매니저 화면에서 프로젝트를 관리할 수 있다.