vue--企业级项目搭建（2）---项目结构说明

---

新创建的项目目录

图（1）

如上是 上一篇创建的项目目录，下面一个一个文件加加以说明。

1.node_modules 文件夹

      

                图（2）                                                                图（3） 

node_modules 文件夹内容长这样 图（2），就是一些环境依赖包。一般情况下，你不用管他。

我们仔细看看文件属性 图（3）。1 处的文件名以及2处的文件大小，可看出该文件夹贼大。因为将项目可能用到的包全部加载到此文件夹下，供项目使用，所以一般情况下node_modules 文件夹内容不会上传到git。 文件

那么，问题来了，git 上拉下来的项目没有该文件夹内容能运行吗？答： 不能（怎么生成看 package.json 说明）

 2.public 文件夹

 vue是 单页面应用，该项目的内容将被加载到这个index.html 的 HTML界面。

2.1 index.html

index.html里你可以配置项目标题，图标等信息，以及一些HTML配置。

项目的界面元素将被加载到 id 为 app 的div 容器上。

2.2 favicon.ico

是项目logo图标，在浏览器标签栏上出现的图标。

3.src文件夹

大家应该都知道 src  是一个项目的核心代码部分。

src 里面的文件及文件夹可以自定义创建。最好除了（App.vue 和 main.js） 

3.1 assets 文件夹 

该文件夹是存放静态资源的 这里放了一个图片资源，可以在这里继续建自定义文件夹。

3.2 components 文件夹

该文件夹是为了存放组建的。（组件就是可复用的 .vue 界面文件）

3.3 main.js 文件

项目入口文件。

 内容如上，可以看到主要做了：

1.获取 vue 并创建实例。（就是node_modules 文件夹 的依赖包 可以这么直接引用 ）

2.获取项目当中的 App.vue  界面。

3.通过 render 函数绘制App.vue 文件的内容。 (自己前了解一下render 函数 )

4.将绘制的界面转椅成html 语言，挂载到 id为 app 的容器上。（这里的 #app  就是 index.html  中的 id为 app 的div）

3.4 App.vue 文件

 vue 文件就是 将界面架构，逻辑 和 样式 集于一身的文件。我们先把vue 文件比作一个个体，一个人。

3.4.1 模板模块

        这里就写我们的HTML里面的 body 内容，但比他厉害点。

问：怎么个厉害？

答： 就是很厉害，只可体会不可言传！

通过 template 标签包裹。（注意： template 里面只能放单个容器！ 什么意思？  你细品！）

模板模块就是 人的骨架，支撑起人的硬件架构。

3.4.2 逻辑模块

一个常用的逻辑模块结构如上。功能模块差不多这些，（还差一个 计算属性模块 computed ,我忘记写了）

生命周期函数vue看官网 
Vue 实例 — Vue.js

逻辑模块 就是人的脑子，他能处理界面的参数值内容，操作逻辑等内容。通过他能让模板模块的内容得以动态的。就是能让一个死的骨架有生命，有活力。

3.4.3 样式 模块 

样式模块就是为 模板模块样式设置的 css 模块。美化界面。

4 .gitignore 文件

 git 代码管理器 忽略这些文件 及文件夹下的改动，并不会被交到git上。

5.babel.config.js 文件

babel 是一个JS编译器，像一个通配器，不同的浏览器 对不断变化的 JavaScript不完全支持，所以通过babel 来实现内容和浏览器之间的适配，实现JavaScript在不同浏览器的兼容。

babel.config.js 这个文件就是对他的一些环境配置。预设，插件等的优先级。

回头补一个关于babel的文档，敬请关注。

6.jsconfig.json文件

是JavaScript的环境配置文件。可以通过它设置编译相关的配置，语言语法检查等配置，路径映射设置等内容。能够提高代码效率的配置。

7.package.json文件 

他是项目配置文件，

8.package-lock.json文件 

9.待完善......