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

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐