本文结构
在初入前端的时候，一个项目中的文件夹会非常多，与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这一项
详情请访问官网查询
