일렉트론 + vue 다른 js 파일 import 하기!

개발환경: 일렉트론, vuejs 

 

웹이 아닌 윈도우 어플리케이션으로 만들 경우 vue 기본 틀이 달라지기에

 

어떻게 import를 할지 정리겸 써봄

 

 

우리가 포함할 대모는 바로 이것!

 

이거 그냥 캔버스같은거임.

 

설명이 매우 심플하며 vue용이 아닌 일반 js html5 기반이다.!

 

일단 npm으로 인스톨! 하지만 일렉트론의 경우는 yarn add를 통해 해당 

 

모듈을 포함해준다.

 

그런후 내가 넣고 싶은 페이지로 이동!

 

<template>

    <div id="sketchpad"></div>

</template>

가이드 대로 id값을 맞춰준후 template에다가 넣기!

 

<script>

  let Sketchpad = require('responsive-sketchpad') //위의 require은 이렇게 위쪽에 import!

 

  export default {

    name: 'user-page',

    components: {Sketchpad},  //컴포넌트도 포함시켜준다.

    data () {

      return {

      }

    },

    methods: {

    },

    mounted () {

//그 나머지 스크립트는 mounted에. 이유는 페이지가 로드될때 제일먼저 실행하기 위함.

      let el = document.getElementById('sketchpad')  

      let pad = new Sketchpad(el)

      pad.setLineColor('#4CAF50')

    }

  }

</script>

 

이런식으로 import를 해주면 완성!

 

알고보면 어렵지 않지만 일렉트론이 typescrit 기반이기때문에

 

문법 오류등 다양한 오류를 직면하면 하나하나 해결하는데 힘들고

 

아리까리해진다. 그러나 알고보면 쉽다는거!