Vue进阶十六:Vue 项目启动原理详解


一、前言

vue项目启动后调用顺序: index.htmlmain.jsapp.vueindex.jscomponents/组件

二、文件介绍

项目创建好后,一般会生成三个文件index.htmlmain.jsapp.vue

  1. index.html :所有vue文件均以单页面形式开发,所有vue组件都是通过index.html进行渲染加载。

  2. main.js:相当于java的入口函数,控制初次启动vue项目要加载的组件。


    el:'#app'index.html中的app组件挂钩。官网解释为:

模板将会替换挂载的元素。

watch:用来监听路由的变换,可以用来定义页面切换时的过渡效果

  1. App.vue认为一个根组件。

  2. index.js文件
    引入组件routes时,path为你以后页面间路由跳转的路径。nameimport进来的名字,component也为这个名字。

其他文件

-build

-build.js 生产环境构建脚本

-utils.js 构建相关工具方法

-webpack.base.conf.js webpack基础配置

-webpack.dev.conf.js webpack开发环境配置

-webpack.prod.conf.js 生产环境配置

-confg 项目配置

dev.env.js 开发环境变量

index.js 项目配置文件

prod.env.js 生产环境变量

test.env.js 测试环境变量

-package.json npm配置文件,里面定义了项目的npm脚本,依赖包等信息

-src 源码目录

main.js 入口js文件

app.vue 根组件

components 公共组件目录

title.vue

三、拓展阅读

相关文章

这篇文章我们将通过debug源码的方式来带你搞清楚defineAsync...
欧阳老老实实的更新自己的高质量vue源码文章,还被某2.6k st...
前言 在Vue3.5版本中响应式 Props 解构终于正式转正了,这个...
组合式 (Composition) API 的一大特点是“非常灵活”,但也因...
相信你最近应该看到了不少介绍Vue Vine的文章,这篇文章我们...
前言 在欧阳的上一篇 这应该是全网最详细的Vue3.5版本解读文...