[vue] vue 프로젝트 파일 구조

• Vue 프로젝트 파일구조

• node_modules

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

• public

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

• src/assets

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

• src/components

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

• App.vue

- 최상위(Root) 디렉토리

• main.js

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

• .gitignore

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

• bable.config.js

- 바벨(Babel) 설정 파일

• package-lock.json

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

• package.json

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

{
  "name": "project01",
  "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": "project01",
  "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에 올렸어도 배포를 막을 수 있습니다.

script: 프로젝트 실행과 관련된 명령어를 등록하고, 쉽게 사용할 수 있습니다.

script는 npm run 명령어로 사용

npm에서 제공하는 ㅁ여령어는 npm 명령어로 사용

dependencies: 사용 중인 패키지 정보를 입력

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

eslintConfig: ESLint는 일관성 이게 코드를 작성하고 버그를 식별하고 회피할 목적으로

ECMAScript/Javascript 코드에서 발견된 패턴을 개발자에게 알려주는 플러그인

구문 분석을 위해 bable-eslint를 파서로 사용했습니다.

browserslist: 전 세계 상용 통계 속에서 상위 1% 이상 사용된 브라우저이며

각 브라우저의 최신 버전 2개를 지원

• README.md

- 프로젝트 정보를 기록하는 파일