vue library(module) Project 사용 #2

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

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

1. sample Project 생성

library 프로젝트를 만들었으니 사용할 프로젝트가 필요하겠죠?
동일한 방법으로 sample 프로젝트를 생성합니다.

vue create my-sample

2. library install 하기

npm install ../my-lib

로컬에 있는 my-lib를 install 합니다.

// package.json

"dependencies": {
  "my-lib": "file:../my-lib",
},

package.json dependencies에 my-lib가 정상적으로 설치된걸 확인합니다.

3. App.vue 수정

기존의 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 하여
정상적으로 화면에 나타나는지 추가해본다.

4. 결과

npm run serve

최초 구동 시 mylib.common.js 관련 오류가 발생하면 취소 후
다시 npm run serve 명령어를 입력한다.
local 프로젝트를 install 할 때만 한 번씩 발생하는데 이유를 잘 모르겠다.

MyTest.vue의 'Hello roro'가 정상적으로 나타난다.


로컬이 아닌 Nexus에 배포하여 사용하는 방법도 나중에 포스팅 할 예정입니다.
profile
얍얍 개발 펀치

0개의 댓글