main.js
「vue cli」の「vue create」コマンドを実行した際にsrcディレクトリに下記のソースが生成されます。全てのsrcファイルのトップ階層のファイルです。
|
1 2 3 4 5 6 7 8 |
import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app') |
import Vue from 'vue'
package.jsonの下記の★をつけた箇所をインポートすることで使えるようになっています。
|
1 2 3 4 |
"dependencies": { "core-js": "^3.6.5", "vue": "^2.6.11" ★ }, |
import App from './App.vue'
App.vueはSFCでimportする事でmain.js内でコンポーネントとして使用する事ができるようになります。
Vue.config.productionTip = false
本番環境用のTipsを非表示にしています。trueにするとDeveloper Toolに情報が表示されるようになります。そんなに必要ないのでfalseのままにしておくと良いでしょう。
render: h => h(App),
App.vue（コンポーネントのオブジェクト）をレンダリングしています。
new Vue({ render: h => h(App), }).$mount('#app')
newでインスタンスを生成した上で#appというDOMにマウントしている。
ちなみに、この#appというのはpublicフォルダ内のindex.htmlに記述されています。
public/index.html
|
1 2 3 4 5 6 7 |
<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> |
この記事へのコメントはありません。