vue.js 개발환경설정 기록 (with node.js)

[yeoseon]

은근히 시작하기가 어렵다. (node.js가 발목을 잡는다.ㅠㅠ) 불필요한 모듈은 괜히 깔기 싫고 모듈 별로 어떻게 쓰는지 다 파악하면서 해보고 싶다.

webpack, babel 등에 대한 세세한 사용 및 고민까지 기록해본다.

추후 vue.js playground 또는 wiki로 옮겨서 정리한다.

참고 자료

vue, vue-cli :: https://kdydesign.github.io/2019/04/22/vue-cli3-tutorial/

[yeoseon]

package.json 의 property

  "dependencies": {
    "axios": "^0.19.1",
    "clipboard": "^2.0.4",
    "core-js": "^3.4.4",
    "element-ui": "^2.13.0",
    "v-calendar": "^1.0.1",
    "vue": "^2.6.10",
    "vue-router": "^3.1.5",
    "vue-spinner": "^1.0.3",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.6.10"
  },

• dependencies : 개발 및 배포시에도 모두 사용되는 모듈
• devDependencies : 개발할 때만 사용되고, 배포시에는 사용되지 않는 모듈
  -> ex) webpack 모듈 같은 경우는, 개발시에 사용되어, 배포를 위한 dist 폴더로 묶어주는 역할을 하므로, 개발시에만 쓰이니 배포 중에는 쓰이지 않아 devDependencies에 들어가게 된다.

--save와 --save-dev의 차이

• --save의 경우 package.json 파일 내의 dependencies 속성으로 들어가게 된다. 그리고 실제로 웹에서 동작할 때에 (배포 중에) 쓰이는 모듈로서 동작한다.
• --save-dev의 경우 package.json 파일 내의 devDependencies 속성으로 들어가게 된다.

--production 옵션으로 빌드하게 되면 --save-dev 옵션으로 설치한 모듈들은 포함되지 않으며 --save 옵션으로 설치한 모듈들은 포함된다.