vue library Project를 제작하는 방법에 대해서 작성합니다.
vue create my-lib
vue-cli를 이용하여 library 프로젝트를 생성합니다. (기본값으로 생성)
테스트용 component를 하나 생성하겠습니다.
<template>
<div>
Hello {{ name }}
</div>
</template>
<script>
export default {
data () {
return {
name: 'roro'
}
}
}
</script>
library project build시 진입 대상이 되는 파일입니다.
기존의 내용을 모두 삭제 후 아래와 같이 작성합니다.
import MyTest from './components/MyTest.vue'
export default MyTest
마지막으로 package.json 파일을 설정합니다.
// package.json
...
"scripts": {
"build": "vue-cli-service build --target lib --name mylib src/main.js",
},
build script를 library에 맞게 위와같이 변경합니다.
// package.json
...
"main": "./dist/mylib.common.js",
build 후, dist 폴더 내의 진입점이 될 파일 경로를 추가합니다.
이 상태로 npm build 를 하면 된단 말씀이신가요