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
import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) app.mount('#app')
html:index.html
<!DOCTYPE html> <html> <body> <div id="app"></div> <script type="module" src="/src/main.ts"></script> </body> </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
まだ回答がついていません
会員登録して回答してみよう