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>
動作
🎉動作OK🎉
参考
徹底マスター JavaScriptの教科書 プログラミングの教養から、言語仕様、開発技法までが正しく身につく (Informatics&IDEA)
- 作者: 磯博
- 出版社/メーカー: SBクリエイティブ
- 発売日: 2017/03/18
- メディア: 単行本
- この商品を含むブログを見る
- p179 プログラムの評価とグローバル変数
JavaScriptのグローバル変数はwindowオブジェクトのプロパティ | hiro345
- グローバル変数について
- 近そうな質問