vue前端项目的结构以及组成部分

本文结构

1. 在初入前端的时候，一个项目中的文件夹会非常多，与Vue官网的简单demo相差非常大
2. 这也是对前端项目文件组成和几个大的模块的一些介绍，文末还有一些不成文的代码规范

本文目录

1. 项目代码组成
2. 前端项目组成
3. 前端的几大模块
4. 项目编写规范

项目代码组成

1. 先不谈前端项目，结合后端项目来看，项目之所以不是一个单纯的文件，很重要的思想就是，模块化和团队合作
2. 编程中的模块化衍生出来的就是将不同功能的代码进行分类，放到不同的文件中，需要时再通过引入，拼接相应的功能，从这个角度出发，就能解释为什么会有这么多的文件夹，而且还是一层又一层的文件夹
3. 还有就是为了和别人合作，需要将不同的功能隔离开来，进行并行开发，这样不同功能之间的耦合性会减少，项目结构是为了可持续开发，而不是随便写了一个文件，功能上虽然实现了，但维护起来甚是头疼，为了考虑方便维护和以后的功能的拓展，也是项目结构如此复杂的一个重要因素

项目结构的普遍特点

1. 经常编写的文件通常在最底层，最深处
2. 放在外面的文件却一般不怎么动
3. 分工协作的话，分给你的代码通常只在一个小文件中编写
4. 不懂项目结构也可以完成功能，但是懂会让你有更深的理解
5. 除了自己功能的文件夹外，一般会有一个像总理一样的文件，管理所有功能

前端项目组成

1. vue、react、angular三大前端框架的结构各有不同

Vue 开源项目结构

React 开源项目结构

Angular 开源项目结构

前端项目组成部分

1. src 目录，是source 资源的简写，该文件夹是主要编写功能的地方
2. static 目录，意为静止，静态，也就是存放html页面和图片等的静态文件夹
3. .gitignore 文件，该文件是给 git 使用，用来选择哪些文件不要被git控制
4. README.md 文件，GitHub的仓库介绍，使用markdown格式编写，github会把这个文件放在目录下面，并展示出来
5. package.json 文件，该文件存储的是整个项目的依赖库的信息，还有npm 的一些设置，可以认为该文件是整个项目的最基础的配置文件
6. package-lock.json 文件，该文件是package.json的辅助文件，用来记录更加详细的依赖库版本和库与库之间的关系，两者组合使用

Vue 前端项目结构

前端的几大模块

1. npm

1. npm 是一个前端库的管理工具，与多数语言的包管理工具一样，功能相似，一般配有一个远程的官方的地方，包含所有的库
2. npm 是nodejs的一个组成部分，nodejs 和 javascript 的关系
3. nodejs 是一个解释器，也可以理解为一个javascript 的运行环境，浏览器自带一个解释器，不同的浏览器的解释器不同，chrome谷歌浏览器使用的是V8引擎，nodejs 是基于V8进行增强，舍弃了一些对浏览器的操作，增加了后端处理的功能
4. nodejs需要安装到电脑中，方可使用

2. Typescript，ES6 ，Javascript

1. typescript 是一种增强类型的面向对象的javascript语言，使用typescript的编译器可以将typescript翻译成JavaScript的代码，实质上都是javascript，不过是换了一种方式编写而已
2. ES6, 全名为 ECMAScript6， 准确地来说，JavaScript是ECMAScript的别名，因为ECMAScript更加官方，感兴趣可以了解js 和ES的渊源
3. 现在主流的javascript是ES5，ES6就是ES5的升级版本，现在主流的框架都是基于ES6进行开发，但ES6比较先进，很多浏览器还不支持，所以需要Babel库进行翻译，将ES6的代码翻译成ES5，然后再在浏览器上运行
4. ES6 是JavaScript的重大更新，有兴趣可以继续了解ES6的语法

3. webpack

1. 推荐观看视频，有一些前端基础的立马就知道用来干嘛的
2. webpack 是为了解决文件引入过多，且不能通过编程来控制引入的库的问题的，以前为了引入js 文件需要写多个script标签，引入css文件需要写很多个style标签，但使用webpack将多个js文件和css文件打包在一个文件内，这样html页面就只需要引入一个文件
3. 当然webpack的功能还不止这些，需要自行学习

4. eslint

1. eslint 是一个代码风格检查工具，帮助团队协助时规范不同人员代码编写，可以强制控制代码结构

5. babel

1. babel 是为了解决es6和浏览器不兼容的问题而诞生的，将ES6翻译为ES5，使得代码与浏览器能够兼容

6. css 相关的库

1. less
2. sess
3. 两者都是对css进行改造，让css能够使用变量，流程控制语句等，像编程一样编写css，模块化设计

以上的这些，除css相关的以外，每一个都有相应的配置文件，学习这些需要有很多基础，基础打牢了才能走得更远

项目编写规范

1. 在此处，eslint 需要重点强调，因为如果不会的话，eslint能从四面八方提醒你，叫你在某一行多加一个空格，异常难受

eslint 的主要功能

1. 比javasript更严格的语法检查
2. 各种标点符号，空格，缩进等代码风格的检查
3. 使用插件控制不同前端框架的特定语法
4. 恶心你

如何关闭它

1. 直接在文件的开头使用注释，eslint 看到这条注释就会乖乖绕道走开
   • 查看详情
2. 全局设置
   1. YourProject/build/webpack.base.conf.js 中找到搜索 config.dev.useEslint, 将这行注释
      
   2. 同理，在YourProject/config/index.js 下，有一个useEslint参数，将其改为 false
      [外链图片转存失败
   3. 在Yourproject/.eslintignore 文件中，在此文件中增加忽略的文件或文件夹

如何设置规则

1. 如果你觉得不想关闭eslint，又不想被报错困扰，不如就学习一下eslint吧
2. eslint 的规则包括两种，一种基本的一些配置，另一种是各种框架特有的配置

vue, react, angular 等框架特有的配置

1. 在 Yourproject/.eslintrc.js 中，找到plugins这一项，填写合适的插件名
   • https://s2.ax1x.com/2019/07/04/ZNHJc4.jpg
2. 然后需要不同插件的官网查询详细的规则
   • Vue 插件
   • React 插件
   • Angular 插件
3. 推荐模式和基础模式
   • 使用 vue/base 和 vue/recommanded 来替代 vue这一项
   • 详情请访问官网查询

eslint 基础的一些规则

• eslint 规则官网
• 在上图的位置，rules这一项里面填写即可，不需要的可以直接注释掉

"off"或者0    //关闭规则关闭
"warn"或者1    //在打开的规则作为警告（不影响退出代码）
"error"或者2    //把规则作为一个错误（退出代码触发时为1）

• eslint 规则基础使用