90. Vue 프로젝트 구조 설명 및 ESLint 에러 확인

node_modules가 설치되어 있고

node_modules 폴더 안에 있는 내용은 package.json 안의 내용으로 구성되어 있다.

{
  "name": "vue-til",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^2.6.14"
  },
  "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-plugin-unit-jest": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/test-utils": "^1.1.3",
    "@vue/vue2-jest": "^27.0.0-alpha.2",
    "babel-jest": "^27.0.6",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.0.3",
    "jest": "^27.0.5",
    "prettier": "^2.4.1",
    "vue-template-compiler": "^2.6.14"
  }
}

vue 관련된 라이브러리 모두 정의되어 있다.

---

Public 폴더가 index.html과 파비콘이 있다.

이런 파일들을 가지고 우리가 (웹팩/vue-cli 서비스 둘 중 하나)으로 빌드하고 

여기서<div id="app"></div> 에 서비스가 그려진다

전형적인 싱글 페이지 애플리케이션의 구조라고 보면 된다.

---

tests폴더가 있는데 유닛 테스트를 jest로 설정했기(vue-cli프로젝트 생성할때 설정 그렇게함)

때문에 jest문법으로 내용이 나와있다.

---

이 4개의 설정파일이 dedicated config files 를 선택했기에 나온 각각의 도구들의 설정 파일이다.