vue library(module) Project 제작 #1

janjanee·2020년 8월 12일
0
post-thumbnail

vue library Project를 제작하는 방법에 대해서 작성합니다.

1. library project 생성

vue create my-lib

vue-cli를 이용하여 library 프로젝트를 생성합니다. (기본값으로 생성)

2. Component 생성

테스트용 component를 하나 생성하겠습니다.

<template>
  <div>
      Hello {{ name }}
  </div>
</template>

<script>
export default {
    data () {
        return {
            name: 'roro'
        }
    }
}
</script>

3. main.js 파일 설정

library project build시 진입 대상이 되는 파일입니다.
기존의 내용을 모두 삭제 후 아래와 같이 작성합니다.

import MyTest from './components/MyTest.vue'
export default MyTest

4. package.json 설정

마지막으로 package.json 파일을 설정합니다.

scripts build 수정

// package.json
 ...
 "scripts": {
    "build": "vue-cli-service build --target lib --name mylib src/main.js",
  },

build script를 library에 맞게 위와같이 변경합니다.

  • mylib -> 프로젝트 이름을 지정합니다.
  • src/main.js -> 프로젝트 entry 진입 대상 파일

main 추가

// package.json
 ...
 "main": "./dist/mylib.common.js",

build 후, dist 폴더 내의 진입점이 될 파일 경로를 추가합니다.

profile
얍얍 개발 펀치

1개의 댓글

comment-user-thumbnail
2023년 5월 8일

이 상태로 npm build 를 하면 된단 말씀이신가요

답글 달기