H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【Web前端问题】webpack vue入口文件

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中的?

回答:

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

wenpack的入口文件,见build/webpack.base.conf.js文件:

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

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

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

关于$mount()方法,请看官网的讲解:
$mount

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

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

#app,当然指的就是html文件中的idapp的DOM元素了。

回答:

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

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

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

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

本文地址:H5W3 » 【Web前端问题】webpack vue入口文件

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址