teratail header banner
teratail header banner
質問するログイン新規登録
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

解決済

1回答

1278閲覧

main.tsとindex.htmlが無いのに何故動く!?(地図プラグインvue-maplibre-gl)

falcom_zx

総合スコア65

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2022/05/15 02:29

0

0

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答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
ryoluo

総合スコア134

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

falcom_zx

2022/05/20 21:16

よく理解できました!ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.30%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問