前端Angular项目文件结构解析

Angular项目文件目录结构

1. _mock

用于存放假数据的文件夹
依赖：@delon/mock

2. .vscode

vscode配置文件

• .vscode/extensions.json

recommendations 配置项为 vscode插件名
在此处可以获取到配置中对应的插件

• .vscode/launch.json

“version”: “0.2.0” // 版本信息
“configurations”: [{}] // 配置集
“type”: “pwa-chrome” // 配置类型
name": “Launch Chrome against localhost” // 配置名称，将会在启动配置的下拉菜单中显示
url": “http://localhost:4200” // 启动项目后的访问链接
“webRoot”: “${workspaceFolder}” // 项目根目录 指向的是工作区的文件夹

“launchOptionType”: “Local” // 调试器启动类型
“targetArchitecture”: “x86” // 生成目标架构 可以为x86, x64, arm, arm64, mips, amd64, x86_64
“program”: “${workspaceRoot}” // 将要进行调试的程序的路径
“args”: [] // 程序调试时传递给程序的命令行参数，一般设为空即可

• .vscode/settings.json

“files.autoSave”: “onFocusChange” // 失去焦点后-文件自动保存
“angular.enable-strict-mode-prompt”: false // 关闭严格模式
“files.exclude”: {} // 指定文件不显示在工作区中

3. dist

dist（发行版）文件夹中包含可由web服务器提供服务的捆绑文件，可以将其放置在nginx、apache、nodejs或任何其他静态文件服务器中

4. e2e

端到端的测试目录 用来做自动测试的

5. src

应用源代码目录

• src/app

包含应用的组件和模块

• src/assets

资源目录，存储静态资源

• src/environments

环境配置 Angular是支持多环境开发的，我们可以配置不同的环境(生产环境，开发环境，测试环境)来进行开发

• src/styles

存放样式文件

6. 项目根目录下文件

.browserslistrc 目标浏览器配置表
.editorconfig 编辑器配置文件
.gitignore 配置git提交时忽略的文件
.prettierignore 完全忽略（即不重新格式化）某些文件和文件夹。
.stylelintrc css代码规范工具
angular.json Angular项目配置文件，包含环境，测试，代理，第三方资源 和 内置工具等。(旧版本angular-cli.json)
karma.conf.js 是karma的配置文件
package-lock.json 锁定安装时的包的版本号，并且需要上传到git，保证其他人在npm install时大家的依赖能保证一致。
package.json 这是一个标准的npm工具的配置文件，这个文件里面列出了该应用程序所使用的第三方依赖包。实际上我们在新建项目的时候，等了半天就是在下载第三方依赖包。下载完成后会放在node_modules这个目录中，后期我们可能会修改这个文件。
proxy.conf.json 代理配置文件
tsconfig.app.json TypeScript编译器的配置,添加第三方依赖的时候会修改这个文件
tsconfig.json 文件与TypeScript编译器(tsc)的配置相对应
tsconfig.spec.json 用于应用程序测试的TypeScript配置。
tslint.json 规范 TS 和 Angular 的代码书写