Vue前端框架的目录结构分析和各文件之间的关系

前言

上一篇记录了基于@vue/cli 和webpack的前端开发环境搭建并总结了一些常见的问题，本篇文章将来分析搭建完成的vue框架的目录结构并梳理各个文件之间的关系。

分析

├── README.md            项目介绍（.md文件，无实际意义）
├── index.html           入口页面（webpack打包的入口文件）
├── build              构建脚本目录
│  ├── build.js            生产环境构建脚本
│  ├── check-version.js          检测node和npm版本
│  ├── logo.png         vue项目初始化时网站的logo图,在src/assets/images文件夹下
│  ├── utils.js            构建相关工具方法（静态文件路径src和css预处理工具）
│  ├── vue-loader-conf.js      	 根据当前的开发环境对webpack中的vue-loader进行配置
│  ├── webpack.base.conf.js      wabpack基础配置
│  ├── webpack.dev.conf.js       wabpack开发环境配置（内置dev服务环境）
│  └── webpack.prod.conf.js      wabpack生产环境配置（最终打包规则的配置文件）
├── config             项目配置
│  ├── dev.env.js           开发环境变量
│  ├── index.js            项目配置文件
│  ├── prod.env.js           生产环境变量
├── package.json          npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
├── src               源码目录  
│  ├── main.js             入口js文件（webpack打包的入口文件）
│  ├── App.vue             根组件
│  ├── components           公共组件目录
│  │  └── HelloWorld.vue
│  ├── assets             资源目录，这里的资源会被wabpack构建
│  │  └── images
│  │    └── logo.png	
│  ├── routes             前端路由
│  │  └── index.js
├── static             纯静态资源，不会被wabpack构建。
└── test              测试文件目录（unit&e2e）
  └── unit              单元测试
    ├── index.js            入口脚本
    ├── karma.conf.js          karma配置文件
    └── specs              单测case目录
      └── Hello.spec.js

页面之间的关系找到：
1、项目跟目下的index.html【入口页面（webpack打包的入口文件）】
2、src/main.js 【入口js文件（webpack打包的入口文件）】
3、src/App.vue 【路由管理.vue文件，管理文件的路由】
4、src/router/index.js 【路由分发js文件（导入模板.vue文件并生成路由）】
5、src/components/HelloWorld.vue 【.vue模板文件，通过App.vue 和 路由管理下的index.js文件，按需加载】