프로젝트 생성하기

Vue

프로젝트 생성하기

Mia_ 2023. 5. 22. 23:48

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

1. Vue 프로젝트 생성

- 명령어 'vue create 프로젝트명'을 실행함

vue create 프로젝트명

- Vue 프로젝트 설치 옵션이 나타남

- 사용할 버전을 선택하여 엔터를 입력하면 프로젝트명으로 폴더가 생성되고, 프로젝트 폴더 밑으로 개발에 필요한 기본 파일들이 자동 생성됨

2. Vue 프로젝트 실행

- 명령어 'npm run serve'를 입력하면 서버가 시작되며, 프로젝트는 기본포트인 8080으로 실행됨

- 기본 포트 외에 다른 포트를 사용하려면 'npm run serve-- --port 포트번호' 명령어로 직접 포트 번호를 지정할 수 있음

3. Vue 프로젝트 파일 구조

- node_modules : npm으로 설치된 패키지 파일들이 모여있는 디렉토리

- public : 웹팩(webpack)을 통해 관리되지 않는 정적 리소스가 모여 있는 디렉토리

- src/assets : 이미지, css, 폰트 등을 관리하는 디렉토리

- src/components : Vue 컴포넌트 파일이 모여있는 디렉토리

- App.vue : 최상위(Root) 컴포넌트

- main.js : 가장 먼저 실행되는 자바스크립트 파일로써, Vue 인스턴스를 생성하는 역할

- .gitnore : 깃허브에 업로드 할 때 제외할 파일 설정

- bable.config.js : 바벨(Babel) 설정 파일

- package-lock.json : 설치된 package의 dependency 정보를 관리하는 파일

- package.json : 프로젝트에 필요한 package를 정의하고 관리하는 파일

- README.md : 프로젝트 정보를 기록하는 파일

4. 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 코드에서 발견된 패턴을 개발자에게 알려주는 플러그인임. 구문 분석을 위해 babel-eslint를 파서로 사용했음

- browserlist : 전 세계 사용 통계 속에서 상위 1% 이상 사용된 브라우저, 각 브라우저의 최신 버전 2개를 지원하도록 함

: 패키지(플러그인)을 설치하면 dependencies, devDependencies, eslintConfig 등은 자동으로 채워지며, name, version, private 등은 사용자가 직접 입력하여 등록할 수 있도록 함.

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

1. Vue 프로젝트 생성

- 명령어 'vue create 프로젝트명'을 실행함

- Vue 프로젝트 설치 옵션에서 'Manually select features'를 선택함

- 프로젝트에 필요한 features를 스페이스 키를 사용하여 선택한 후 엔터키를 입력함

features는 아래와 같음

- Choose Vue version : Vue 버전을 선택

- Babel : ES6 버전 이상이나 타입스크립트로 코딩하면 범용적인 ES5 버전으로 자동 전환 지원

- TypeScript : 타입스크립트 지원

- Progressive Web App (PWA) Support : 웹앱 개발 지원

- Router : 라우터 처리를 위한 Vue-Router

- Vuex : Vue에서 상태관리를 위한 패키지

- CSS Pre-processors: Sass, Less, Stylus 등 CSS 작성을 위한 CSS 전처리기

- Linter/Formatter : 자바스크립트 코딩 컨벤션(표준 가이드)

- Unit Testing : 모카(Mocha) 등 단위 테스트를 위한 플러그인

- E2E Testing : E2E(End-to-End) 테스트로 통합 테스트를 위한 플러그인

2. 앞서 선택한 features에 대해 하나씩 세부 옵션을 선택해야 함

- Vue 버전을 선택

- Vue-Router에서 historty 모드를 사용할 것인지 선택

- linter / formatter를 선택하는데 이 옵션은 코딩 규칙을 위해 사용됨. 팀 작업 시 다수의 개발자가 공통된 코딩 스타일을 맞추기 위해 필요한 부분으로 참고한 이 서적은 ESLint + Standard config 선택을 추천했음

- Lint 적용 시점을 위한 옵션을 선택하는데 'Lint on save'와 'Lint and fix on commit' 중에 선택함

- 앞서 선택한 features인 Babel, ESLint 등에 대한 설정 옵션 파일을 별도의 config 파일로 만들지 package.json 파일 안에 만들지에 대한 옵션을 선택할 수 있음

3. preset 저장 옵션

: 향후 vue 프로젝트 생성 시 앞서 선택한 옵션과 동일하게 프로젝트를 빠르게 생성할 수 있도록 preset을 저정할 수 있음

- 저장하기를 선택하면 preset 이름을 입력할 수 있음

- 예를 들어 프리셋 저장 이름을 'vue basic'으로 지정했다면 터미널에서 명령어 'vue create vue-preset'을 입력, 실행 시 Default와 Manually select features 옵션 외에도 앞서 저장한 preset인 vue basic 설정 옵션이 확인 됨

- 해당 프리셋을 선택하면 앞서 세부적으로 설정했던 모든 옵션이 그대로 적용되어서 프로젝트가 별도의 설정 절차 없이 바로 설치됨

4. Vue 프로젝트 구조

- manually로 설치할 시 router와 vuex를 선택했다면 default와 달리 추가적으로 router와 store 폴더가 확인 될 것임

Vue 프로젝트 매니저로 프로젝트 설치하기

1. Vue 프로젝트 매니저 실행

- 명령어 'vue ui'를 실행하면 브라우저가 열리면서 기본 포트로 Vue 프로젝트 매지저가 실행 됨

2. Vue 프로젝트 생성

- 메뉴에서 '만들기' 항목을 선택해 메뉴얼 셀렉트 피쳐스 옵션을 통해 프로젝트를 선택했던 과정을 GUI 환경을 통해서 진행하면 됨

- 프로젝트가 생성 완료되면 프로젝트 대시 보드가 나타남

3. 프로젝트 대시보드 보기

3.1 대시보드

: 대시보드 메뉴에서 프로젝트를 모니터링하거나 관리할 수 있음

- 포트 중지 : 실행 중인 네트워크 포트 종료

플러그인 업데이트 : 플러그인 메뉴에 설치되어 있는 플러그인 중 업데이트 가능한 플러그인 목록이 표시되고 업데이트 할 수 있음

- 의존성 업데이트 : 의존성 메뉴에 있는 프로젝트 의존성 목록 중 업데이트가 가능한 목록이 표시되고, 바로 업데이트 할 수 있음

- 태스크 실행 : 작업목록 메뉴에서 제공하는 프로젝트 태스크인 server, build, lint, inspect 중 자주 사용하는 태스크를 선택하여 바로 실행 할 수 있음

취약점 확인 : 현재 설치되어 있는 프로젝트 내에서 취약점 정보를 제공해 줌

- 뉴스피드 : Vue 관련 주요 뉴스 확인

3.2 플러그인

- 플러그인 메뉴에서 플로젝트에 설치되어 있는 플러그인 목록을 확인할 수 있음

- '플러그인 추가' 항목을 통해 플러그인을 검색하고 설치할 수 있음

3.3 의존성

- 의존성 메뉴에서 개발에 사용하고 있는 플러그인의 버전과 정보를 확인할 수 있음

- 이 메뉴의 내용은 package.json의 dependencies(메인 의존성)와 devDependencies(개발 의존성)임

3.4 설정

- 설정 메뉴에서 프로젝트 생성 시 선택했던 features 기능의 config 파일을 관리할 수 있음

- Babel, ESLint 등과 같은 플러그인은 각각의 플러그인 사용을 위한 설정(config)을 별도로 지정할 수 있음

- 앞서서는 이를 위한 각 플러그인 전용 별도의 config 파일을 생성해서 관리할지, package.json 안에서 사용 설정을 package.json 파일 하나에서 관리할지를 선택했는데 설정 메뉴에서는 GUI 기반으로 설정하여 관리 할 수 있게 해줌

3.5 작업 목록

- 작업 목록 메뉴에서 Vue 프로젝트를 실행하고 빌드하는 작업을 수행할 수 있음

- 대시보드에서 serve를 클릭하여 프로젝트를 실행하면 프로젝트의 상태, 성능, 에셋, 의존성에 대한 실시간 정보를 확인할 수 있음

** reference : 「Vue.js 프로젝트 투입 일주일 전」, 비제이퍼블릭