0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-03-06

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

環境:
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'って何??
そんなファイルどこにもないぞ??

何者だこいつ???

(18:47 更新 解釈が全然違っていたため。すでに閲覧された方、ご迷惑をおかけしました。)
以下のコマンドを発行時に、my-projectディレクトリが生成され、その下に色々とファイルが生成される。

vue create my-project 
※my-projectの部分は可変

その際に、「package.json」というjsonファイルが作成されるのだが、
どうやらその中に「dependencies」という情報が設定されているようで、(中身は環境によって異なる(バージョンやデータなど))その中のvueを使用するためのインポート文として、「import { createApp } from 'vue'」が記載されているらしい。

"dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  }

以上。

0
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?