Vue项目结构

（1） Build：项目构建（webpack）相关代码，存放项目构建脚本

（2） config：配置目录，存放项目的一些基本配置信息，最常用的就是端口转发

（3） node_modules：npm加载的项目依赖模块， 这个目录存放的是项目的所有依赖，即 npm install 命令下载下来的文件

（4） src：这个目录下存放项目的源码，即开发者写的代码放在这里

          这里包含了几个文件：

　　        assets：存放图片

　　        components：存放组件文件（一些可复用，非独立的页面），

                                      推荐在 components 中存放组件，另外单独新建一个 page 文件夹，专门用来放完整页面。

               router： 存放了路由的js文件，index.js

               

                   ① 首先导入了Vue对象、Router对象以及 HelloWorld 组件

                   ② 创建一个Router对象，并定义路由表

                   ③ 这里定义的路由表，path为 / ，对应的组件为 HelloWorld，

                       即浏览器地址为 / 时，在router-view位置显示 HelloWorld 组件

               App.vue：项目入口文件，是一个Vue组件，也是项目的第一个Vue组件

               

　　            ① App.vue 是一个vue组件，组件中包含三部分：页面模板（template）、页面脚本（script）、页面样式（style）

                   ② 页面模板，定义了页面的 HTML 元素，这里定义了两个，一个是一张图片，另一个则是一个 router-view

                   ③ 页面脚本，主要用来实现当前页面数据初始化、事件处理等等操作

                   ④ 页面样式，就是针对 template 中 HTML 元素的页面美化操作

               main.js：核心文件，相当于Java中的main方法，是整个项目的入口js

               

                   ① 首先导入 Vue 对象

                   ② 导入 App.vue 并命名为 App

                   ③ 导入router，注意，由于router目录下路由默认文件名为 index.js ，因此可以省略

                   ④ 所有东西都导入成功后，创建一个Vue对象，设置要被Vue处理的节点是 '#app'

                      '#app' 指提前在index.html 文件中定义的一个div

                  ⑤ 将 router 设置到 vue 对象中，简化的写法，完整的写法是 router:router，如果 key/value 一模一样，则可以简写。

                  ⑥ 声明一个组件 App，App 这个组件在一开始已经导入到项目中了，但是直接导入的组件无法直接使用，需要声明。

                  ⑦ template 中定义了页面模板，即将 App 组件中的内容渲染到 '#app' 这个div 中

（5） static：静态资源目录

（6） test：初始测试目录

（7） .xxxx：配置文件，包括git配置和语法配置等

（8） index.html：项目目的首页，入口页，也是整个项目唯一的HTML页面

（9） package.json：项目配置文件，定义了项目的所有依赖，包括开发时依赖和发布时依赖

（10） README.md：说明文档