按照这个结构原因：开发JavaWeb应用时，不同类型的文件有严格的存放规则，否则不仅可能会使web应用无法访问，还会导致web服务器启动报错
 
 
JavaWebApp
 
 
 
htm,jsp,js文件等
 
 
 
WEB-INF(注意大写)
 
（该目录下文件，外界无法直接访问，有web服务器调配）
 
classes目录（存放编译后文件，此处还需要设置路径）
 
 
lib目录（java类运行时的包）
 
 
web.xm文件（web应用的配置文件）
 
 
 
 
 
web.xml配置文件
 
1 <?xml version="1.0" encoding="ISO-8859-1"?>
 2 <web-app xmlns="http://java.sun.com/xml/ns/javaee"
 3    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 4    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
 5    version="2.5">
 6 
 7   <display-name>Welcome to Tomcat</display-name>
 8   <description>
 9      Welcome to Tomcat
10   </description>
11 
12 </web-app>
 
 

项目文件夹下的组成部分：
 
manage.py 是项目运行的入口，指定配置文件路径。
 
与项目同名的目录，包含项目的配置文件。
 
___init.py__ 是一个空文件，作用是这个目录可以被当作包使用，也可以做一些初始化操作。
 
settings.py 是项目的整体配置文件。
 
urls.py 是项目的 URL 配置文件。
 
wsgi.py 是项目与 WSGI 兼容的 Web 服务器。

为什么要规范项目目录结构？
 
首先我们要遵循约定由于配置的原则，通过约定代码结构或者命名规范来减少配置数量。例如，将所有.css后缀的文件放在css文件夹下，将xx.js文件压缩后的重新命名为xx.min.js。那怎么样的目录结构是好的呢？
 
 
没有最好的项目目录组织方式，只有最合适！
 
在创建目录结构时，可能会有这样的争论：
 
css VS style、img VS image、image VS images、···
 
其实并没有最好的项目目录组织方式，只有最合适的。建议统一文件夹命名方式和规则（是否简写、是否复数、是否区分大小写），若存放图片文件的文件夹命名为img（image简写，且为单数），那存放js文件的文件夹最好命名为js（JavaScript的简写）
 
整理了一个简洁版的项目目录结构：
 
 
1. /doc
 
存放项目各类文档
 
2. /src
 
项目工程代码都在这
 
3. /src/css
 
存放样式文件的文件夹
 
4. /src/img
 
存放图片文件的文件夹
 
5. /src/js
 
存放JavaScript文件的文件夹，/src/js/vendor 存放插件文件
 
6. /src/index.html
 
首页、/src/login.html 登录页、/src404.html 默认错误页
 
若项目很庞大，每个页面可单独建文件夹，示例：
 
 
7. /src/favicon.ico 
 
图标文件，可通过在线网站进行转换 ，该图标文件通常显示在网站的地址栏
 
8. /src/.editorconfig 
 
用来定义项目的编码规范，编辑器的行为会与.editorconfig 文件中定义的一致，并且其优先级比编辑器自身的设置要高，这在多人合作开发项目时十分有用而且必要。
 
有些编辑器默认支持editorConfig，如webstorm；而有些编辑器则需要安装editorConfig插件，如ATOM、Sublime、VS Code等
 
9. /src/.gitignore 
 
首先要强调一点，这个文件的完整文件名就是".gitignore"，注意最前面有个“.”。
 一般来说每个Git项目中都需要一个“.gitignore”文件，这个文件的作用就是告诉Git哪些文件不需要添加到版本管理中。实际项目中，很多文件都是不需要版本管理的，比如Python的.pyc文件和一些包含密码的配置文件等等。这个文件的内容是一些规则，Git会根据这些规则来判断是否将文件添加到版本控制中。
 
10. /src/CHANGELOG.md 
 
项目每个版本的更新信息，说明版本号、更新内容、修复了哪些问题等
 
11. /src/humans.txt 
 
保存网站信息和网站建设者信息 ，格式规范参考官网http://humanstxt.org/  。简单理解，robots.txt文件是给机器看的，而humans.txt就是给用户看的。
 
12. /src/LICENSE.txt 
 
项目基于的许可协议
 
13. /src/README.md 
 
项目简介、使用方式、相关链接
 
14. /src/robots.txt 
 
robots.txt是一个纯文本文件，是爬虫抓取网站的时候要查看的第一个文件，一般位于网站的根目录下。robots.txt文件定义了爬虫在爬取该网站时存在的限制，哪些部分爬虫可以爬取，哪些不可以爬取。这只是行业规范，不排除流氓软件会忽视这个文件。（防君子不防小人）。具体编写格式请参考官网：http://www.robotstxt.org/
 
一般网站有些管理页面不想被搜索引擎抓取，就能通过设置这个文件，规定除了/admin目录下的文件，其他文件都可以访问
 
User-agent: *
Disallow: /admin/
 
 
 
与君共勉：再牛逼的梦想，也抵不住傻逼般的坚持！
 

本文结构
 
在初入前端的时候，一个项目中的文件夹会非常多，与Vue官网的简单demo相差非常大
这也是对前端项目文件组成和几个大的模块的一些介绍，文末还有一些不成文的代码规范
 
本文目录
 
项目代码组成
前端项目组成
前端的几大模块
项目编写规范
 
项目代码组成
 
先不谈前端项目，结合后端项目来看，项目之所以不是一个单纯的文件，很重要的思想就是，模块化和团队合作
编程中的模块化衍生出来的就是将不同功能的代码进行分类，放到不同的文件中，需要时再通过引入，拼接相应的功能，从这个角度出发，就能解释为什么会有这么多的文件夹，而且还是一层又一层的文件夹
还有就是为了和别人合作，需要将不同的功能隔离开来，进行并行开发，这样不同功能之间的耦合性会减少，项目结构是为了可持续开发，而不是随便写了一个文件，功能上虽然实现了，但维护起来甚是头疼，为了考虑方便维护和以后的功能的拓展，也是项目结构如此复杂的一个重要因素
 
项目结构的普遍特点
 
经常编写的文件通常在最底层，最深处
放在外面的文件却一般不怎么动
分工协作的话，分给你的代码通常只在一个小文件中编写
不懂项目结构也可以完成功能，但是懂会让你有更深的理解
除了自己功能的文件夹外，一般会有一个像总理一样的文件，管理所有功能
 
前端项目组成
 
vue、react、angular三大前端框架的结构各有不同
 
 
 
Vue 开源项目结构
 
 
 
 
 
React 开源项目结构
 
 
 
 
 
Angular 开源项目结构
 
 
 
前端项目组成部分
 
src 目录，是source 资源的简写，该文件夹是主要编写功能的地方
static 目录，意为静止，静态，也就是存放html页面和图片等的静态文件夹
.gitignore 文件，该文件是给 git 使用，用来选择哪些文件不要被git控制
README.md 文件，GitHub的仓库介绍，使用markdown格式编写，github会把这个文件放在目录下面，并展示出来
package.json 文件，该文件存储的是整个项目的依赖库的信息，还有npm 的一些设置，可以认为该文件是整个项目的最基础的配置文件
package-lock.json 文件，该文件是package.json的辅助文件，用来记录更加详细的依赖库版本和库与库之间的关系，两者组合使用
 
Vue 前端项目结构
 
 
前端的几大模块
 
1. npm
 
npm 是一个前端库的管理工具，与多数语言的包管理工具一样，功能相似，一般配有一个远程的官方的地方，包含所有的库
npm 是nodejs的一个组成部分，nodejs 和 javascript 的关系
nodejs 是一个解释器，也可以理解为一个javascript 的运行环境，浏览器自带一个解释器，不同的浏览器的解释器不同，chrome谷歌浏览器使用的是V8引擎，nodejs 是基于V8进行增强，舍弃了一些对浏览器的操作，增加了后端处理的功能
nodejs需要安装到电脑中，方可使用
 
2. Typescript，ES6 ，Javascript
 
typescript 是一种增强类型的面向对象的javascript语言，使用typescript的编译器可以将typescript翻译成JavaScript的代码，实质上都是javascript，不过是换了一种方式编写而已
ES6, 全名为 ECMAScript6， 准确地来说，JavaScript是ECMAScript的别名，因为ECMAScript更加官方，感兴趣可以了解js 和ES的渊源
现在主流的javascript是ES5，ES6就是ES5的升级版本，现在主流的框架都是基于ES6进行开发，但ES6比较先进，很多浏览器还不支持，所以需要Babel库进行翻译，将ES6的代码翻译成ES5，然后再在浏览器上运行
ES6 是JavaScript的重大更新，有兴趣可以继续了解ES6的语法
 
3. webpack
 
推荐观看视频，有一些前端基础的立马就知道用来干嘛的
webpack 是为了解决文件引入过多，且不能通过编程来控制引入的库的问题的，以前为了引入js 文件需要写多个script标签，引入css文件需要写很多个style标签，但使用webpack将多个js文件和css文件打包在一个文件内，这样html页面就只需要引入一个文件
当然webpack的功能还不止这些，需要自行学习
 
4. eslint
 
eslint 是一个代码风格检查工具，帮助团队协助时规范不同人员代码编写，可以强制控制代码结构
 
5. babel
 
babel 是为了解决es6和浏览器不兼容的问题而诞生的，将ES6翻译为ES5，使得代码与浏览器能够兼容
 
6. css 相关的库
 
less
sess
两者都是对css进行改造，让css能够使用变量，流程控制语句等，像编程一样编写css，模块化设计
 
 
 
以上的这些，除css相关的以外，每一个都有相应的配置文件，学习这些需要有很多基础，基础打牢了才能走得更远
 
 
项目编写规范
 
在此处，eslint 需要重点强调，因为如果不会的话，eslint能从四面八方提醒你，叫你在某一行多加一个空格，异常难受
 
 
 
eslint 的主要功能
 
 
比javasript更严格的语法检查
各种标点符号，空格，缩进等代码风格的检查
使用插件控制不同前端框架的特定语法
恶心你
 
如何关闭它
 
直接在文件的开头使用注释，eslint 看到这条注释就会乖乖绕道走开 
  
查看详情
 
全局设置 
  
YourProject/build/webpack.base.conf.js 中找到搜索 config.dev.useEslint, 将这行注释
 
同理，在YourProject/config/index.js 下，有一个useEslint参数，将其改为 false
 [外链图片转存失败
在Yourproject/.eslintignore 文件中，在此文件中增加忽略的文件或文件夹
 
 
如何设置规则
 
如果你觉得不想关闭eslint，又不想被报错困扰，不如就学习一下eslint吧
eslint 的规则包括两种，一种基本的一些配置，另一种是各种框架特有的配置
 
vue, react, angular 等框架特有的配置
 
在 Yourproject/.eslintrc.js 中，找到plugins这一项，填写合适的插件名 
  
https://s2.ax1x.com/2019/07/04/ZNHJc4.jpg
 
然后需要不同插件的官网查询详细的规则 
  
Vue 插件
React 插件
Angular 插件
 
推荐模式和基础模式 
  
使用 vue/base 和 vue/recommanded 来替代 vue这一项
详情请访问官网查询
 
 
eslint 基础的一些规则
 
eslint 规则官网
在上图的位置，rules这一项里面填写即可，不需要的可以直接注释掉
 
"off"或者0    //关闭规则关闭
"warn"或者1    //在打开的规则作为警告（不影响退出代码）
"error"或者2    //把规则作为一个错误（退出代码触发时为1）
 
eslint 规则基础使用