从vue新建页面过程看vue项目文件调用关系

使用到vue项目的文件包括一个.html，两个.js，两个.vue文件，关系如上图所示
由图可见，文件关键处在于main.js，管理着所有需要的资源，其中new Vue的参数，解释如下：
el：官方解释为实例提供挂载的元素。此处为index.html中的

。
router：为router:router,的简写，指向引入文件中的routes:[]
components：注册哪些组件，需在顶部引入文件。
template：替换挂载元素的模板组件，而挂载元素的内容都将被忽略。即用template替换index.html里面的

此时，可知main.js文件调用关系分为三步，如图中序号

确定将被挂载（替换）的元素，此处为index.html中的<div id="app"><div>。
注册组件（此处只有组件App），选择其中用于替换挂载元素（第一步中的元素）的模板组件（<App/>），即用App.vue替换index.html中的<div id="app"><div>。
注入路由器router：
    模板组件（App.vue）中有<router-view/>，将在其中渲染路由匹配到的组件
    注入（import）路由时指定的是router文件夹，即文件夹下所有routes
    router文件夹下此时只有index.js文件，其中routes:[]规定了文件地址及其url地址映射
    根据文件地址，载入组件（First.vue），组件被渲染在<router-view/>中，显示在index.html中

然而追本溯源，调用关系中仍有两个问题：

index.html为何默认显示？
其实，双击执行npm中dev时，控制台将执行如下语句：

webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

由此可见，运行时启动文件webpack.dev.conf.js，而文件中包含如下语句，规定了起始页面：

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
main.js为何默认加载？
因为使用的脚手架工具vue-cli里用webpack来打包项目文件，webpack.dev.conf文件里还定义了webpack基础配置文件webpack.base.conf.js，定义语句如下：
const baseWebpackConfig = require('./webpack.base.conf')
而文件webpack.base.conf.js中，包含如下语句，指定了入口：

entry: {
app: ‘./src/main.js’
}

---

作者：默庸
来源：CSDN
原文：https://blog.csdn.net/weixin_43236610/article/details/82866518
版权声明：本文为博主原创文章，转载请附上博文链接！