本文结构

在初入前端的时候，一个项目中的文件夹会非常多，与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 看到这条注释就会乖乖绕道走开
- 查看详情
全局设置
1. YourProject/build/webpack.base.conf.js 中找到搜索 config.dev.useEslint, 将这行注释
2. 同理，在YourProject/config/index.js 下，有一个useEslint参数，将其改为 false
  [外链图片转存失败
3. 在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 规则基础使用

vue前端项目的结构以及组成部分相关推荐

Vue前端项目【尚品汇】
Vue前端项目[尚品汇] 1. 说明 2. 对项目创建 3.结构 4. 项目运行起来时,浏览器自动打开 5.关闭ESLint校验功能 5.路由分析 6.路由元信息 7. 路由传参 7.1 路由的跳转方 ...
VUE项目学习（一）：搭建VUE前端项目
VUE项目学习(一):搭建VUE前端项目 1.安装node.js环境 (1)下载node.js,下载地址为:https://nodejs.org/en/ (2)按照默认选项安装node,检查安装版本 ...
vue 前端项目部署阿里云服务器
vue 前端项目部署阿里云服务器 one 前期准备 two 代码打包扔服务器 one 前期准备首先两个软件应该下载(Xftp Xshell),如果有其他类似的软件也可以. 打开xftp,新建一个会 ...
html 项目目录架构,前端项目目录结构规范.pdf
前端项目目录结构规范前前端端项项目目目目录录结结构构规规范范简简介介该文档主要的设计目标是项目开发的目录结构保持一致,使容易理解并方构建与管理. 要要求求在本文档中,使用的关键字会以中文 ...
cmd搭建vue前端项目详细过程
cmd 搭建vue前端项目下载nods.js node.js下载(Windows版本) next 安装完毕! 配置node.js环境变量进入找到Path进入这里填你的node.js的安装路径验 ...
Vue前端项目-Vuex实战使用
目录 1.创建 vue-cli 脚手架项目 2.安装 vuex 3.将 store 实例注册到 Vue对象 4. store 实例对象 5.将 store 分割成模块化(Module) 6.项目中的模 ...
Vue前端项目自适应布局
Vue前端项目自适应布局一.单位尺寸二.基于rem实现自适应布局一.单位尺寸 px % vw.vh: 窗口 em: 针对父元素的font-size rem:"root em" ...
为什么vue前端项目要使用nodejs
一.传统的JavaScript 传统的js是运行在浏览器上的,因为浏览器内核分为两个部分: 渲染引擎---渲染HTML和CSS, JavaScript 引擎---负责运行 JavaScript 随着技 ...
B站云E办Springboot+vue——前端项目完整版（含源码）
一.项目简介项目背景:受疫情的影响,许多企业由线上办公转为线下办公.随着线上办公的人数的增多,线上办公的优点逐步凸显:通过实现工作流程的自动化.节省企业办公费用.实现绿色办公,同时提升办公效率. 项 ...
vue php项目目录结构,vue的项目结构须知
这次给大家带来vue的项目结构须知,vue项目结构须知的注意事项有哪些,下面就是实战案例,一起来看一下. 新建一个项目之后,我们来看一下项目的目录结构几个主要文件的内容 index.html文件(入 ...

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

本文结构

本文目录

项目代码组成

项目结构的普遍特点

前端项目组成

前端项目组成部分

Vue 前端项目结构

前端的几大模块

1. npm

2. Typescript，ES6 ，Javascript

3. webpack

4. eslint

5. babel

6. css 相关的库

项目编写规范

如何关闭它

如何设置规则

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

eslint 基础的一些规则

vue前端项目的结构以及组成部分相关推荐

最新文章

热门文章