Q&A
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件
0
ベストアンサー
結論として、htmlファイルの #app 要素にマウントする処理は行われていますが、その処理は依存パッケージである vue-cli-service (@vue/cli-service) に内包されています。そのため地図ライブラリには index.html は含まれていません。
Demoの実行コマンド yarn serve の中身は以下の通りで、vue-cli-service の serve コマンドを呼び出しています。このときエントリポイントとして dev/serve.ts を指定しています。
package.json
1{ 2 "scripts": { 3 "serve": "vue-cli-service serve dev/serve.ts", 4 } 5}
なお、vue-cli 側には index.html が含まれています。
https://github.com/vuejs/vue-cli/blob/97ff15817c5facd629894ae4956d989e32bf89f0/packages/%40vue/cli-service/lib/config/index-default.html
https://github.com/vuejs/vue-cli/blob/97ff15817c5facd629894ae4956d989e32bf89f0/packages/%40vue/cli-ui/public/index.html
投稿2022/05/18 13:48
編集2022/05/18 13:49
総合スコア134
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/05/20 21:16