vue 설치 : npm install vue
vue cil 설치 : npm install -g @vue/cli
vue 프로젝트 생성 : vue create 프로젝트명
npm run serve : vue 실행
vue router 설치: vue add router
cf. 프로젝트 생성하고 다른 것을 하기 전에 먼저 라우터를 설치해야 한다

1. vue create 프로젝트이름

• 위의 명령어를 실행하명 아래와 같이 package.json 파일이 생긴다
• cf. vue2로 설치함
• npm run serve를 입력하면 vue가 실행된다

{
  "name": "copyedu",
  "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": "^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-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "vue-template-compiler": "^2.6.14"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

2. package.json 해부

1. scripts

"scripts":  {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
}

1-1) vue-cli-service serve

Usage: vue-cli-service serve [options] [entry]

Options:

  --open         open browser on server start
  --copy         copy url to clipboard on server start
  --mode         specify env mode (default: development)
  --host         specify host (default: 0.0.0.0)
  --port         specify port (default: 8080)
  --https        use https (default: false)
  --public       specify the public network URL for the HMR client
  --skip-plugins comma-separated list of plugin names to skip for this run

1-2) vue-cli-service build

• dist/ 디렉토리에 프로덕션용 번들을 만든다
• js/css/html을 minify(압축: 기능을 변경하지 않고 해석된 언어의 소스 코드에서 불필요한 문자를 모두 제거하는 프로세스)
• 더 좋은 캐싱을 위해 자동 코드 스플리팅(코드 스플리팅: spa는 초기 로딩 때 해당 웹앱의 모든 것을 다 불러와야하는데, 이때 발생하는 느린 로딩 시간을 단축하기 위해 고안된 방법. 해당 라우트를 방문했을 때만 관련된 모듈들을 로딩하도록 한다.)

빌드

3) vue-cli-service lint

2. dependencies

  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^2.6.14"
  }

core-js