vue中main.js讲解

main.js代码：

import Vue from 'vue'                                        // 导入Vue对象

import App from './App'                                    // 导入App.vue组件，.vue可省略不写

import router from './router'                            // 导入router目录下所有路由

Vue.config.productionTip = false                     // 阻止启动生产消息（启动时console多显示一条信息）

new Vue({                                                             // 创建Vue实例

  el: '#app',                                                         // 挂载id='app'

  router,                                                              // 配置router，完整写法router : router

  components: { App },                                     // 组件使用App.vue，router会写入到App.vue

  template: '<App/>'                                         // 模板使用<App/>

})

在main.js中，新建了一个Vue实例，并使用el: '#app'链接到index.html中的app，并使用template引入组件<App>和路由相关的内容。也就是说通过main.js关联到App.vue组件。

提一句：项目加载的过程是index.html -> main.js -> app.vue -> index.js -> helloworld.vue