vue 项目架构分析

1： Vue 项目结架构分析：

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

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

（3） node_moudle:   npm 加载的项目依赖模块， 在这个目录放的是项目中所有的依赖， 即是 npm install 命令下载下来的文件。

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

                 这里包含了几个文件：

                assets：存放图片  （存放静态资源目录）

               components：存放组件文件（一些可复用，非独立的页面）， 推荐在components 组件中存放组件， 另外单独存放一个文件夹page, 专门用来放完整页面。

(5):   router： 存放了路由的js文件，index.js

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

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

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

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

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

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

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

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

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

 (7) :   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 中\

  (8):     static：静态资源目录

（9）   test：初始测试目录

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

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

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

（13）  README.md：说明文档