Vue项目总结（1）项目结构分析

1，项目的基本结构

项目文件目录：

其中，dist是运行npm run build命令后所生成的。dist是发布实际使用的文件。dist目录可以更改，更改是在vue.config.js中更改。

package.json保存一些依赖信息，config保存一些项目初始化配置，index.html是我们的首页。

最关键的代码都在src目录中，下图是我的另外一个中型项目的src目录：

components是组件集合，util是工具目录，包括http.js的工具等。route是路由文件的集合。store包括了store.js里面主要实现组件间公共属性变量及操作方法。

2，app.vue

<template><el-container><el-aside><el-header class="cont-header" style="height: 100px">公共头部</el-header></el-aside><el-main class="main1">公共main部分</el-main><router-view></router-view></el-container></template>
<script type="text/babel"></script><style></style>

其中：

   <router-view></router-view>

表示路由视图容器。比如访问：http://localhost:8080/about 会将about的内容放进去。http://localhost:8080/recruit 会将recruit的内容放进去。无论将什么内容放进去，但是如下的app.vue的部分是公共的，变得只是路由里的内容。哪里控制访问一个路由，将什么内容放进路由视图视图容器呢？是由路由来控制的。

<el-aside><el-header class="cont-header" style="height: 100px">公共头部</el-header></el-aside><el-main class="main1">公共main部分</el-main>