Vue.jsで地図ライブラリMaplibre GLを使いたく学習中であり、githubにあったvue-maplibre-glのコードを参考にしております。
githubのREADMEで示されたとおりデモを立ち上げながらコードを読んでいるのですが、vue-maplibre-glが動く理由が分かりませんでした。
単一ファイルコンポーネントのVue.jsプロジェクトを一から作成する場合、npm init vue@3
コマンドで./index.html
や./src/main.ts
が生成されると思います。これらが動く仕組みとしてmain.ts
でvueファイルがインポートされ、createApp
したうえでhtmlファイルのid="app"
にマウントされる事で動くと思うのですが、先に挙げたvue-maplibre-gl
のデモは、これらの過程が無いように思えます。
typescript:main.ts
1import { createApp } from 'vue' 2import App from './App.vue' 3 4const app = createApp(App) 5app.mount('#app')
html:index.html
1<!DOCTYPE html> 2<html> 3 <body> 4 <div id="app"></div> 5 <script type="module" src="/src/main.ts"></script> 6 </body> 7</html>
vue-maplibre-glのデモが、createApp
やhtmlファイルのid="app"
へマウントしていないのに、動く理由をご教授頂けないでしょうか?(そもそもindex.htmlファイルが見当たりません)
なお、vue-maplibre-glはgithubに示されているとおり以下コマンドでデモが立ち上がります。
(※私の環境ではTypeScriptエラーが出たので、当該エラー箇所をnullからanyに変えて動かしました)
git clone https://github.com/razorness/vue-maplibre-gl.git cd vue-maplibre-gl yarn yarn serve

回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/05/20 21:16