webpack vue入口文件

Question

index.html
main.js
App.vue
这三个文件的关系是什么？
我的理解是index.html是webpack的入口
main.js是vue的入口，App.vue是渲染的第一个页面。
fork了几个人的项目，每个人写法都不同，晕了。

const app = new Vue({
    router,
    ...App
}).$mount("#app");

上面的#app指的是index中的<div id="app">
还是App.vue中的？

Answer 1

你搞错了。
不理解这些配置那就去看build文件夹下的配置文件，那里的代码也不难，一行挨着一行慢慢看，不懂就去查对应的手册，一劳永逸的搞定它，不然以后碰到这种问题照样抓瞎。

wenpack的入口文件，见build/webpack.base.conf.js文件：

entry: {
    app: './src/main.js'
}

所以，main.js才是webpack的入口文件

在main.js中，加载的是App.vue文件，所以App.vue是vue渲染的入口

关于$mount()方法，请看官网的讲解：
$mount

此方法用于手动地挂载一个未挂载的实例。

最后，关于index.html。
这是默认SPA应用的网页模板。

#app，当然指的就是html文件中的id为app的DOM元素了。

Answer 2

index.html 就是这个单页应用的载体。如果不懂什么叫单页应用，就先去搞懂这个。

main.js 是给webpack提供的入口，webpack通过main.js去检索所用到的文件进行打包。
比如 main.js 里面导入了vue，那么webpack就会找到vue的文件去打包。

然后 App.vue，是首个vue组件，也可以理解为根组件，其他组件挂载在它之下。

App是指HTML里面的id，表示将App.vue挂载在#APP下