Vue Framework

이 가이드는 Vite의 시작 패키지를 기준으로 작성되었습니다.
아래 가이드의 완성본은 시작 패키지 문서에서 확인할 수 있습니다.
vue3, vuex 를 적용한 가이드는 데모 패키지에서 확인할 수 있습니다.

주의사항: 시트의 객체를 data 속성에 정의하면 안됩니다. 시트 객체를 정의시 Observer 가 추가되어 call stack 에러가 발생할 수 있습니다.
마찬가지로 시트 객체에 강제로 Observer 를 추가하는 경우에도 call stack 에러가 발생할 수 있음으로 주의해주시기 바랍니다.

#사전 설정

#프로젝트 생성

• https://vitejs.dev/guide/

npm create vite@latest <project_dir> -- --template vue
Copy

#패키지 설치

cd <project_dir>
yarn add @ibsheet/loader vue-router
yarn add -D sass
# using npm
# npm i -S @ibsheet/loader vue-router
# npm i -D sass
Copy

• 라우트 기능의 사용을 위해 vue-router 패키지를 추가로 설치합니다.
• vue3에서 vue-router는 4.x버전을 설치해야합니다.
• scss 스타일 시트 언어를 사용하기 위해 sass를 설치합니다. (Vite에서 sass-loader 없이 동작합니다.)

#IBSheet 라이브러리

만약 서버 URL을 사용한다면 이 단계는 생략합니다.

프로젝트 폴더의 public 폴더에 ibsheet 라이브러리를 복사합니다.

├── public/
|  └── ibsheet/
|     ├── css/
|     ├── locale/
|     ├── fonts/
|     ├── ibsheet.js
|     └── ibleaders.js
Copy

#개발서버 실행

yarn dev
# using npm
# npm run dev
Copy

#메인 컴포넌트

#main.js

src/main.js

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import HelloWorld from './components/HelloWorld.vue'
import PageOne from './components/PageOne.vue'
import PageTwo from './components/PageTwo.vue'
const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', name: 'home', component: HelloWorld },
    { path: '/page1', name: 'page1', component: PageOne },
    { path: '/page2', name: 'page2', component: PageTwo }
  ]
})
createApp(App).use(router).mount('#app')
Copy

#App.vue

메인 컴포넌트 혹은 모듈에서 사용할 라이브러리들을 설정(등록)합니다.

src/App.vue

#template

<div>
  <p>@ibsheet/loader v{{loaderVersion}}</p>
  <div class="main-navs">
    <h3>Go to Pages:</h3>
    <ul>
      <li><router-link to="/">Home</router-link></li>
      <li><router-link to="/page1">Page1</router-link></li>
      <li><router-link to="/page2">Page2</router-link></li>
    </ul>
  </div>
  <div class="main">
    <router-view></router-view>
  </div>
</div>
Copy

#script

import loader from '@ibsheet/loader'
loader.config({
  registry: [{
    name: 'ibsheet',
    baseUrl: '/ibsheet'
  }]
})
export default {
  name: 'App',
  data() {
    return {
      loaderVersion: loader.version
    }
  }
}
Copy

#style

lang="scss"

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.main-navs {
  > h3 {
    margin: 40px 0 0;
  }
  > ul {
    list-style-type: none;
    padding: 0;
    > li {
      display: inline-block;
      margin: 0 10px;
      a > {
        color: #42b983;
      }
    }
  }
}
Copy

#샘플 공유 데이터

각 컴포넌트에서 사용할 공용 샘플 데이터 파일을 만듭니다.

• src/shared/ibsheet-data.js

#서브 컴포넌트

• src/components/HelloWorld.vue
• src/components/PageOne.vue
• src/components/pageTwo.vue

#HelloWorld

홈 화면에서는 ibsheet 라이브러리를 로드하지 않습니다. 만약 로드되어 있다면 컴포넌트 마운트시 unload 합니다.

src/components/HelloWorld.vue

#template

<div>
  <img alt="Vue logo" src="../assets/logo.png">
  <h1>{{ msg }}</h1>
</div>
Copy

#script

import loader from '@ibsheet/loader'
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'IBSheetLoader for Vue!'
    }
  },
  mounted() {
    loader.unload()
  }
}
Copy

#Page1

컴포넌트 마운트시 첫 번째 샘플 데이터로 시트를 생성합니다. 컴포넌트가 제거될 때, 해당 테이블도 제거합니다.

src/components/PageOne.vue

#template

<div>
  <p>page1 works!</p>
  <div id="sheetContainer"></div>
</div>
Copy

#script

import loader from '@ibsheet/loader'
import { SheetSampleData } from '../shared/ibsheet-data'
let SHEET_ID = ''
export default {
  mounted() {
    const { data, options } = SheetSampleData[0]
    loader.createSheet({
      el: 'sheetContainer',
      options,
      data
    }).then((sheet) => {
      SHEET_ID = sheet.id
    });
  },
  beforeUnmount() {
    loader.removeSheet(SHEET_ID)
  }
}
Copy

#Page2

두 번째 샘플 데이터로 시트를 생성합니다. 컴포넌트가 제거될 때, 해당 테이블도 제거합니다.

src/components/PageTwo.vue

#template

<div>
  <p>page2 works!</p>
  <div id="sheetContainer"></div>
</div>
Copy

#script

import loader from '@ibsheet/loader'
import { SheetSampleData } from '../shared/ibsheet-data'
let SHEET_ID = ''
export default {
  mounted() {
    const { data, options } = SheetSampleData[1]
    loader.createSheet({
      el: 'sheetContainer',
      options,
      data
    }).then((sheet) => {
      SHEET_ID = sheet.id
    });
  },
  beforeUnmount() {
    loader.removeSheet(SHEET_ID)
  }
}
Copy

#Package.json

"dependencies": {
    "@ibsheet/loader": "^1.1.22",
    "vue": "^3.3.0",
    "vue-router": "^4.2.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.0",
    "sass": "^1.69.0",
    "vite": "^5.0.0"
  }
Copy

#시작 패키지

위의 가이드 내용을 바탕으로 구성한 소스코드 저장소를 다음 페이지에서 확인할 수 있습니다.

• 문서 바로가기