なんも分からないのでしらべた

なんもわからん!…ので、できる範囲で調べる。

Vue.js(vue-cli)にて外部jsライブラリを読み込みたかった…(雑記)

Vue.jsにて非exportsの外部jsライブラリ(functionべた書き)を読み込んで、vue.jsのcomponentsにて利用したかったのだが、検索しても良く分からず。

exports化された外部jsライブラリ(module)ならimport文でいけそう。
しかし、読み込むjsライブラリがベタfunctionの場合どうやってvue側で呼び出せばよいか分からず、かなり悩んだ。

苦心の結果何となく動いたのでメモする。
あまり良くない方法だと思うのであとでTeratailで質問を出す。

詳細

外部ライブラリをindex.htmlで読み込む

  • index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- 読み込む -->
    <script src="static/lib/myaction.js" defer></script>
    <title>help2</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
  • myaction.js
//ベタfunction 
function myFunc(){
  alert("test test myaction");
}

vueファイルにてwindowオブジェクト経由で呼び出し

  • App.vue
<template>
  <div id="app">
    <b-button @click="myactionFunc()">myaction</b-button>
  </div>
</template>

<script>
export default {
  name: 'app',
  components: {
  },
  methods: {
    myactionFunc: function () {
      // scriptエリアならwindowオブジェクトが取れる
      window.myFunc()
    }
  }
}
</script>

動作

f:id:kbn1053:20180421001959p:plain

🎉動作OK🎉