1 뷰 프로젝트

source: categories/study/vue-project/vue-project_1.md

1.1 개발환경 구성

1.2 Vue CLI

• Vue CLI는 Vue 프로젝트를 빠르게 구성하고, 빌드, 디플로이 할 수 있게 도와주는 도구입니다.
• 여기서 CLI는 Command Line Interface의 약자로 터미널에 명령어를 입력하여 컴퓨터와 상호 작용하는 방식을 의미합니다.

• 그럼 Vue CLI를 설치해보겠습니다.

npm install -g @vue/cli

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

1.3 Vue 프로젝트 생성

vue create vue-project

1.4 Vue 프로젝트 파일 구조

1. node_modules: npm으로 설치된 패키지 파일들이 모여있는 디렉토리
2. public: 웹팩(webpack)을 통해 관리되지 않는 정적 리소스가 모여 있는 디렉토리
3. src/assets: 이미지, css, 폰트 등을 관리하는 디렉토리
4. src/components: Vue 컴포넌트 파일이 모여있는 디렉토리
5. App.vue: 최상위(Root) 컴포넌트
6. main.js: 가장 먼저 실행되는 자바스크립트 파일로써, Vue 인스턴스를 생성하는 역할
7. .gitignore: 깃허브에 업로드할 때 제외할 파일 설정
8. babel.config.js: 바벨(Babel) 설정 파일
9. package-lock.json: 설치된 package의 dependency 정보를 관리하는 파일
10. package.json: 프로젝트에 필요한 package를 정의하고 관리하는 파일
11. README.md: 프로젝트 정보를 기록하는 파일

{
  "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-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"
  ]
}

• name
  • 프로젝트 이름을 입력합니다.
• version
  • 프로젝트의 버전 정보를 입력합니다.
• private
  • 이 옵션을 true로 설정하면 해당 프로젝트를 npm으로 올릴 수 없습니다.
  • 개발자가 실수로 해당 프로젝트를 npm에 올리더라도 이 옵션이 true로 되어 있으면 배포를 막을 수 있습니다.
• scripts
  • 프로젝트 실행과 관련된 명령어를 등록합니다.
  • 프로젝트 실행, 빌드 등과 같이 프로젝트 개발, 운영시 사용되는 다양한 script 명령어를 등록하고, 쉽게 사용할 수 있습니다.
  • 개발자가 직접 정의한 script는 npm run 명령어로 사용하고, npm에서 제공되는 명령어는 npm 명령어로 사용합니다.
• dependencies
  • 사용 중인 패키지 정보를 입력합니다.
• devDependencies
  • 프로젝트 배포 시 필요없는, 개발 시에만 필요한 패키지 정보가 등록되는 곳입니다.
• eslintConfig
  • EsLint는 일관성 있게 코드를 작성하고 버그를 식별하고 회피할 목적으로 ECMAScript/JavaScript 코드에서 발견된 패턴을 개발자에게 알려주는 플로그인입니다.
  • 구문 분석을 위해 babel-eslint를 파서로 사용했습니다.
• browserslist
  • 전 세계 사용 통계 속에서 상위 1% 이상 사용된 브라우저, 각 브라우저의 최신 버전 2개를 지원하도록 합니다.

1.5 Vue 프로젝트 Manually select features

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