Vue主要文件的执行顺序

Vue中主要文件的加载顺序是怎么样的,main.js,App.vue,vue.config.js。我知道main.js是入口文件,会先执行它,在main.js中挂载根实例App.vue,随后执行App.vue,在然后就是各种自定义 “x.vue”。在App.vue开一个router-view,则每次执行x.vue之前都会执行App.vue,那么main.js呢,这个入口文件只执行一次吗,配置文件又是在什么时候执行的呢。很多博客都说有index.html,我创建项目时并没有这个文件。

在Vue中,主要文件的加载顺序是:

1.main.js:入口文件,Vue应用程序的起点。在这个文件中,你会初始化Vue实例、引入插件和全局组件、挂载根实例等。

2.App.vue:根组件,Vue应用程序的入口。在这个文件中,你会定义应用程序的整体布局和共享的样式。

3.vue.config.js:配置文件,用于修改Webpack和Vue CLI配置的文件。在这个文件中,你可以配置Webpack插件、自定义Webpack加载器、添加环境变量等。

每次路由切换时,Vue会销毁旧组件实例并创建新的组件实例。因此,如果你在App.vue中定义了,每次路由切换时都会重新渲染App.vue和当前路由组件。

main.js只会在应用程序加载时执行一次,用于初始化Vue实例和挂载根组件。在开发模式下,每次保存代码更改时,Webpack会重新编译应用程序并刷新浏览器,但main.js不会重新执行。

关于index.html文件,它是Vue应用程序的HTML模板文件,用于设置应用程序的基本HTML结构和引入CSS、JS等资源。在使用Vue CLI创建项目时,会自动生成一个public/index.html文件作为模板文件。如果你手动创建项目并没有这个文件,可以在项目根目录下创建一个index.html文件,并在里面编写HTML结构和引入Vue和其他资源的代码。

  1. 首先是index.html文件,这是包含了Vue程序的标记语言,也就是View;

  2. 然后是main.js文件,这是负责将Vue绑定到该标记语言上,也就是Controller;

  3. 接着就是App.vue文件,这是负责Vue程序主要逻辑和操作的文件,也就是Model;

  4. 最后就是assets文件,这里的文件负责提供图片、样式等,也就是Style。