제작한 vue library Project를 사용하는 방법에 대해서 작성합니다.
library 프로젝트를 만들었으니 사용할 프로젝트가 필요하겠죠?
동일한 방법으로 sample 프로젝트를 생성합니다.
vue create my-sample
npm install ../my-lib
로컬에 있는 my-lib를 install 합니다.
// package.json
"dependencies": {
"my-lib": "file:../my-lib",
},
package.json dependencies에 my-lib가 정상적으로 설치된걸 확인합니다.
기존의 HelloWorld 내용을 아래와 같이 MyTest component로 변경한다.
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<my-test />
</div>
</template>
<script>
import MyTest from 'my-lib'
export default {
name: 'App',
components: {
MyTest
}
}
</script>
library 프로젝트에서 만들었던 MyTest.vue를 import 하여
정상적으로 화면에 나타나는지 추가해본다.
npm run serve
최초 구동 시 mylib.common.js 관련 오류가 발생하면 취소 후
다시 npm run serve 명령어를 입력한다.
local 프로젝트를 install 할 때만 한 번씩 발생하는데 이유를 잘 모르겠다.
MyTest.vue의 'Hello roro'가 정상적으로 나타난다.