Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8809

[Vue.js]main.jsのimport { createApp } from 'vue'の'vue'って何者??

$
0
0

(当たり前として捉えられているのかは知らないが)意外とこれ解説してる記事がどこにもなかったので、自分なりの見解を記載。

環境:
PC:mac book pro
バージョン:Vue.js 3
エディタ:VSCode

前提:
・Vue.js環境周りを全て設定完了
・(設定直後で)ファイルは何もいじっていない
・localhost:8080でサーバ起動できる

上記前提を元に以下ファイルを見ていったときに疑問が1つ。

main.js

import { createApp } from 'vue' ⇦こいつ
import App from './App.vue'
createApp(App).mount('#app')

2行目はまぁ、App.vueをmain.jsにインポートしてるってだけの話だからいいとして、
1行目のこいつ。
createAppはただの関数名(予約語という訳でもなく)と思われるのでここは問題ない。
createAppは関数であるものの、'vue'って何??
そんなファイルどこにもないぞ??

何者だこいつ???

ってことで自分なりに考えて見た結果、、

・'vue'は拡張子を指している(vueというファイルがない以上、それ以外に捉えようがない)
・createApp(App)で、拡張子が'vue'になっているファイルを受付けてくれるようになる。
・最終的に、createApp(App)によって、拡張子'vue'のファイルをHTML用に変換し、mount('#app')で、html側で指定したid='app'のタグに対してhtmlとして出力される。

この解釈であれば、必要な分だけvueファイルをhtml側に出力することが可能になることが分かる。

もし、解釈が間違っていたら遠慮なく指摘してほしい。


Viewing all articles
Browse latest Browse all 8809

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>