nvm node.js npm

설치순서

nvm -> node.js -> npm

설치방법

1. nvm설치 : sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash
2. node.js, npm설치 : nvm install 12.14.1

• npm은 node.js 패키지에 들어가있다.

Vue 패키지

사용방법

1. npm init ( npm init -y 로 모든 파일 체크 건너뛰기가능)
2. package.json 생성
3. vue nodule 설치
   3.1 npm i vue vue 2.6.14 최신버전 설치
   3.2 npm i vue@next vue 3.2.19 next버전 설치

• npm un vun를 통해 패키지 제거도 가능하다.

npx serve

--save-dev 는 package.json의 devDependencies에 모듈이 작성된다.

• -D로도 같은 결과이다.

devDependencies

의존하긴 하나 개발할때만 의존을 한다.

npm run 목적어

package.json에서 script부분에
"dev" : "serve"와 같이 serve에 대해 설정을 할 수 있고
이를 npm run dev명령어를 통해 진행할 수 있다.

package-lock.json의 필요성

package.json의 경우 버전에 대해 ^12.0.0과 같이 ^를 통해 ~이상을 다 허용하고 있다.

이는 예를들어 A위치에서 해당 버전으로 작업하던중
B위치에서 다시 적용시키려다가 업데이트된 패키지가 있을경우 패키지 버전이 달라진다.

이를 해결하기 위해서 정확한 패키지 버전이 존재하는 package-lock.json파일의 버전이 필요하다.

그외에도 node_module의 변화를 감지하고 이를 기록하는 역할을 한다.

node_modules

package.json과 package-lock.json만 있으면
npm i 명령어를 통해 만들수 있다.
=> git에 node_modules를 올릴 필요가 없다.

.gitignore

하나의 파일로써 git에 add하지않을 대상들에 대해 코드내부에 작성할 수 있다.

ex) .gitignore

node_modules/
.idea/			

• idea의 경우 webStorm에서 생성되는 것이다.

parcel로 vue 모듈 사용하기

미리 알아야 할 것

node.js는 commonJS로 다루어 module.exports로 node_modules안의 vue폴더가 존재한다. < = > ESM(ES module)

src 폴더는 개발용이고 dist 폴더는 배포용이다.

사용방법

1. npm init -y
2. npm i vue@next
3. src파일에 index.html , main.js , App.vue 작성
4. npm i sass -D , npm i parcel -D
5. package.json의 scripts 코드 수정

모듈사용방법

vue

import * as Vue from 'vue'를 통해 사용

• 설치한 패키지 vue는 따로 경로를 명시할 필요가 없다.

scss

<style lang="scss">
    $color : orange;
    h1{
        color:$color;
    }
</style>

vue 파일에서 이렇게 사용

pacakge.json

  "scripts": {
    "dev": "parcel src/index.html",
    "build": "parcel build ./src/index.html"
  },

• dev는 개발용도로 개발서버가 오픈
• build는 배포용도로 개발서버가 열리지않는다.
  대신 코드가 가독성이 좋은 코드가 아닌 암호화(?) 비슷하게 되어있어서 dev에서 하던 필요없는 주석과 코드를 줄여준다.

webpack으로 vue 모듈 사용하기

필수로 하는 것

npm init -y
npm i vue@next
npm i -D webpack webpack-cli
npm i -D vue-loader@next
npm i -D @vue/compiler-sfc

선택으로 하는 것

npm i -D html-webpack-plugin

주의할 점

• vue-loader는 그냥 설치할 경우 15.9.8이 latest(최신)버전이다.
  해당 최신버전은 vue2버전에 적용된다.
  따라서 vue3을 적용하기 위해서는 vue-loader@next를 통해 16.8.1을 설치해야한다.

• "@vue/compiler-sfc"와 "vue"의 버전을 같게 맞춰줘야한다.

parcel webpack 링크