一、前言

vue项目启动后调用顺序: index.html → main.js → app.vue → index.js → components/组件

二、文件介绍

项目创建好后，一般会生成三个文件：index.html、main.js、app.vue。

  1. index.html ：所有vue文件均以单页面形式开发，所有vue组件都是通过index.html进行渲染加载。 <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6cae0d90e1014c358957ccce4f16cd51~tplv-k3u1fbpfcp-zoom-1.image" alt="" />

  2. main.js：相当于java的入口函数，控制初次启动vue项目要加载的组件。 <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5749d945ac4c4bb69df10d0dbd9d5c40~tplv-k3u1fbpfcp-zoom-1.image" alt="" /> el:'#app'和index.html中的app组件挂钩。官网解释为：

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

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

  1. App.vue默认为一个根组件。 <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bc5ebff0967644f690ebd9417768ebb8~tplv-k3u1fbpfcp-zoom-1.image" alt="" />

  2. index.js文件 引入组件routes时，path为你以后页面间路由跳转的路径。name为import进来的名字,component也为这个名字。 <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0e0758e97e17437796236daf5754ed00~tplv-k3u1fbpfcp-zoom-1.image" alt="" />

其他文件：</p><p>-build</p><p> -build.js 生产环境构建脚本</p><p> -utils.js 构建相关工具方法</p><p> -webpack.base.conf.js webpack基础配置</p><p> -webpack.dev.conf.js webpack开发环境配置</p><p> -webpack.prod.conf.js 生产环境配置</p><p>-confg 项目配置</p><p> --dev.env.js 开发环境变量</p><p> --index.js 项目配置文件</p><p> --prod.env.js 生产环境变量</p><p> --test.env.js 测试环境变量</p><p>-package.json npm包配置文件，里面定义了项目的npm脚本，依赖包等信息</p><p>-src 源码目录</p><p> --main.js 入口js文件</p><p> --app.vue 根组件</p><p> --components 公共组件目录</p><p> --title.vue</p>

三、拓展阅读