[npm 만들기]

npm 가입

• npm에 패키지를 만들어 배포하기 위해서는 계정이 있어야 합니다.

팀 내에서만 사용 가능하게 설정

 

깃헙에 레포지토리 생성

 

vue.js 컴포넌트 만들기

 

npm package 만들기

package.json 설정하기

{
  "name": "vue-cropper",
  "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"
  ]
}

- 버전 명시. 코드 바뀐 채로 다시 배포하려면 버전을 올려야 함.

- private 옵션은 true로 변경

- main 프로퍼티에 패키지에 사용될 메인 코드 파일의 경로를 적는다.

 

 

Nuxt 프로젝트에서 사용하기

npm i 패키지이름

 

~/plugins/cropper.client.js 파일 생성

안에 다음과 같이 작성

import Vue from 'vue';
import VueCropper from 'stitch-button';

export default ({ app }) => {
  Vue.component('VueCropper', VueCropper);
};

nuxt.config.js에 플러그인 추가

export default {
  plugins: [
    // ...
    '~/plugins/cropper.client.js',
  ],
}

 

컴포넌트에 넣어서 테스트(별다른 임포트 코드 필요 없이 바로 <vue-cropper /> 넣으면 됨.

 

 

화면에 렌더링되는 것을 확인한다.