Vue.js mount(‘#app’)がマウントされているファイル

作成日 2021.01.05
Vue.js
Vue3

Vue.jsで、基本的なことですがvue/cliで作成されたmain.js内にあるappがマウントされているファイルの場所を記述してます。

1. 環境
2. ファイル場所

環境

OS windows10 64bit
vue 3.0.0
node v14.6.0
npm 6.14.6
@vue/cli 4.5.9

Vue3環境をwindowsに構築する

ファイル場所

main.js内に記述されている「mount(‘#app’)」がマウントしてるidが記述されているファイルは

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

publiフォルダ内にある「index.html」にあります。

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

なので、index.htmlを以下のように変更して、

<div id="appnew"></div>

main.jsを

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#appnew')

とすると、レイアウトは少し崩れますが、初期状態のままだと、ちゃんと以下のページが表示されます。

Vue.js mount(‘#app’)がマウントされているファイル

環境

ファイル場所

docker composeを使ってApache Sparkを構築する 2021.01.04

javascript canvasタグに四角形を作成する 2021.01.05