关于Vue脚手架写法的问题

Posted 2021-01-26 jimc

问题描述：

main.js

import Vue from ‘vue‘
import App from ‘./App‘

/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  components: { App },
  template: ‘<App/>‘
})

为什么已经定义了 components: { App } ，还需要 template: ‘<App/>‘ ？

问题解答：

el: ‘#app‘ ：是指向 index.html 的<div id="app"></div>元素，该元素作为vue的挂载点

components ：是声明有哪些组件

template ： 是使用哪个组件

将 <App/> 挂载到 #app 这个元素，<App/> 本身是一个组件，即这里通过 components: { App } 注册组件，然后通过 template: ‘<App/>‘ 使用组件。