一、相关文件和文件夹的含义：
- build 文件夹: 里面是对 webpack 开发和打包的相关设置，包括入口文件、输出文件、使用的模块等；
- config 文件夹: 主要是指定开发和打包中的静态资源路径、要压缩的文件类型、开发使用的端口号、开发使用虚拟服务器跨域请求 api 等。
- node_modules: 项目的依赖库；
- src 文件夹： 我们主要操作的地方，组件的增加修改等都在这个文件夹里操作，下文会有详细介绍；
- static 文件夹: 静态资源文件夹，放置不会变动的资源，直接被复制到最终的打包目录（默认是dist/static）下；
- .babelrc: 使用 babel 的配置文件，用来设置转码规则和插件；
- .editorconfig: 代码的规范文件，规定使用空格或 tab 缩进，缩进的长度是两位还是四位之类的代码风格，使用的话需要在编辑器里下载对应的插件；
- .eslintignore: 指定 eslint 忽略的文件；
- .eslintrc: 配置 eslint 的检测规则，强制按照规则书写代码；
- .gitignore: 指定 git 忽略的文件，所有 git 操作均不会对其生效；
- .postcssrc: 指定使用的 css 预编译器，里面默认配置了 autoprefixer ，自动补全浏览器前缀；
- favicon.ico: 浏览器标签页 title 旁边的小图标，这是需要我们自己粘贴过来的；
- index.html: 首页文件，项目运行的时候，会自动将我们在 src 文件夹里生成的组件插入这个文件里；
- LICENSE: 项目声明的 license；
- package-lock.json: 当 node_modules 或 package.json 发生变化时自动生成的文件。这个文件主要功能是确定当前安装的包的依赖，以便后续重新安装的时候生成相同的依赖，而忽略项目开发过程中有些依赖已经发生的更新；
- package.json: 指定项目开发和生成环境中需要使用的依赖库；
- README.md: 相当于是一个备注文件，对项目开发过程中需要注意的地方进行一些说明。
src 文件夹结构
src 文件夹里的文件夹设置是灵活的，可以根据自己的习惯进行，不必雷同。下面是这次项目的结构：
- assets: 放置静态资源，包括公共的 css 文件、 js 文件、iconfont 字体文件、img 图片文件 以及其他资源类文件。之所以强调是公共的 css 文件，是因为要在组件的 css 标签里加入 ‘scoped‘ 标记，将其作用范围限制在此组件以及调用它的父级组件中，避免污染全局样式；
- components: 放置通用模块组件。项目里总会有一些复用的组件，例如弹出框、发送手机验证码、图片上传等，将它们作为通用组件，避免重复工作；
- http: 放置与后台 api 相关的文件。这里面有 axios 库的实例配置文件、使用配置的 axios 实例接入 api 获取数据的函数的集合的文件；
- mixins: 放置混合选项的文件。具体来说，相当于是公用函数的集合，在组件中引用时，可以作用于组件而不必书写重复的方法；
- pages: 放置主要页面的组件。例如登录页、用户信息页等。通常是这里的组件本身写入一些结构，再引入通用模块组件，形成完整的页面；
- router: 放置路由设置文件，指定路由对应的组件；
- store: 放置 vuex 需要的状态关联文件，设置公共的 state、mutations 等；
- App.vue: 入口组件，pages 里的组件会被插入此组件中，此组件再插入 index.html 文件里，形成单页面应用；
- main.js: 入口 js 文件，影响全局，作用是引入全局使用的库、公共的样式和方法、设置路由等。
二、Vuejs+elementUI框架开发的项目结构及文件关系
项目结构
|----- build #webpack编译相关文件目录，一般不用动
|----- config #配置目录
| |------ dev.env.js #开发环境变量
| |------ index.js #主配置文件,配置主访问路径端口
| |------ prod.env.js #生产环境变量
|----- dist #生产环境下build后的文件存放目录（发布目录）
|----- src #前端项目源码目录
| |------api #封装的接口文件目录
| | |------api.js #接口脚本配置，请求后台路径接口配置（ajax请求路径）
| | |------websocket.js #前端与服务器建立连接
| |------assets #资源目录（图片资源等）
| |------common/js #公共文件目录
| |------components / views #组件及页面文件目录，调用api.js中的方法
| | |------例如login/index.vue #登录模块
| | |------Home.vue #主页面模板template
| |------router #路由目录,配置页面路径、组件名称
| | |------index.js #import进主要页面，并一一配置路径
| |------App.vue #项目入口文件 |
| |------main.js #项目的核心文件 |这两个文件是关联的
|----- static #开发模式下的静态资源目录
|----- index.html #首页入口文件，你可以添加一些 meta 信息或同统计代码啥的
|----- package.json #项目配置文件，依赖等的版本信息
|----- README.md #项目的说明文档，markdown 格式
以登录模块为例，文件关系如下：
登录页面login/index.vue --> 调用接口脚本api.js的方法确认登录信息，成功后通过路由配置文件router/index.js跳转到后台主页面Home.vue，Home.vue页面可以直
接使用路由配置中的属性（$router.options.routes访问路由配置文件的属性）
三、
1、目录结构
项目是vue项目，但是react其实也差不多。
config 项目所有的在运行前的配置中心
index.js 项目公共前缀，路由前缀，项目名称等等
dist 打包后目录（前端这些年约定俗成了）
public 不会被打包的目录，一个是webpack默认路径，另一个是大家都这么干
config(项目如果是外部js全局变量控制环境)
img（不被打包的静态图片）
js（不被打包的静态js）
index.html webpack入口html文件
src 源码目录
assets 静态文件目录，一般放图片
img
js（不需要被打包的不要放这里，放在外层的public下面）
businessComponents 业务组件
Menu(菜单组件)
list.js（菜单组合路由）
layout 页面上全局布局组件，比如路由嵌套的部分
One.vue（组件）
Two(文件夹)
index.vue
index.js 需要全局注册的统一出口
README.md（组件太多需要说明文件）
components 和业务无关的组件
AntDesgin.js(组件库入口)
Element.js（组件库入口）
index.js 需要全局导入和注册的统一出口
README.md（组件太多需要说明文件）
mixin 全局mixin部分，非全局部分的mixin不建议使用。容易引起代码混乱
pages 路由相关页面部分，原本大家用的是views
Home 首页
index.vue
Page2
ComTwo 页面组件更加复杂了
ComThree.vue 子组件的组件
index.vue 页面组件入口
ComOne.vue 页面组件
index.vue 页面组件入口
404.vue
power 项目业务上的权限管理中心
router 路由部分（不建议把菜单管理也放这里）
before.js(路由守卫js，名称随意，清晰明确即可)
index.js
service 接口管理中心
index.js
store 数据中心,不在和业务有关，主要是为了配置缓存使用
index.js
theme 主题样式中心，所有全局的css都在这里
index.css(scss,less) 保证你的输出是一个出口
tool（utils） 工具函数中心
App.vue 初始模板
CreateApp.js main.js里面会存在很多业务上的逻辑，那么这里封装下
main.js
.browserslistrc
.eslintrc.js eslint配置
.gitignore
babel.config.js babel配置
package.json
prettier.config.js prettier配置
README.md 项目初始约定，规范书写中心
vue.config.js vue打包配置中心，webpack等修改也在这里
2、代码和目录结构上的个人习惯
遵循原则，能直接复制的最好。也要遵循历史规范
1、css嵌套不超过三层，性能方面的考虑
2、可以直接在div上面写css，也可以使用父子选择器等等
3、css名称多个字符使用“-”隔开，比如：name-title
4、class类文件首字母大写（行业上的基本习惯了），类函数名称首字母大写
5、组件名称首字母大写，采用大驼峰命名：NameTile
6、组件文件目录则采用组件名称命名，并且采用大驼峰命名
NameTile
index.vue
7、组件如果是单标签的则必须用目录名称或者组件名称进行命名
比如：组件名称为Test.vue 则使用为<Test />
8、非单标签组件多字符则为<test-name></test-name>方式使用
以上组件命名原则基于复制直接能用原则，和遵循html规范和一般框架规范。不采用eslint强制约定。但是习惯之后大家会发现写代码效率会高很多。因为组件名称你直接复制黏贴基本能用了。
9、pages页面下的文件不要根据业务组件进行划分，一个路由一个文件夹。命名比如为目录加index文件方式。
10、pages下路由页面文件如下方式使用
pages 路由相关页面部分，原本大家用的是views
Home 首页
index.vue
Page2
ComTwo 页面组件更加复杂了
ComThree.vue 子组件的组件
index.vue 页面组件入口
ComOne.vue 页面组件
index.vue 页面组件入口
11、不要再main.js中写任何业务相关代码，main.js里面最好能保证只有相关导入信息
12、个人会使用prettier规范约定代码习惯，我其实很喜欢这个工具。这样就能把大家的代码风格统一成一个
13、代码不要想着所有人都和你一样，要跟着项目走。并不是每一个项目都可以完整的工具链。比如小程序。
14、关于函数和变量命名大小驼峰都可以，保证字母之间清晰可见就行。比如常量用大写字符，我个人是不习惯的。习惯上哪怕同一个字母，我见到的时候也不一定能看懂。
15、能写注释最好都写注释
16、觉得文件有需要增加额外说明的时候添加一个README.md文件，愿意写最好啦
二、目录的组件形成和各个约定规范为什么这样定义
其实都知道大家不喜欢说教，说自己喜欢什么样子的就什么样子。更有甚至说不写注释是为了自己不可取代，如果是玩笑那最好。我喜欢我的项目我走了也能一目了然。而不是因为哪些莫须有的竞争力让代码很糟糕。所以我有代码洁癖。目前为止，每一个和我接触的同事都说我的项目是让人心情舒畅的，除非功能非常的复杂，不然有经验能力的都能很快上手。
1、assets，也可以是static
这个文件其实随着慢慢的发展没有什么特殊的存储了。老时代的人应该会划分下面三个文件夹：js，css，img。
分别存放三个静态资源。但是现在其实随着项目的开发似乎只有img可以存放了。但是依旧建议大家根据业务情况划分文件夹。css就不必要了，因为业务需要被独立出来了。
2、businessComponents和components
为什么这么划分其实是因为随着业务开发久了，我们的组件其实应该分为组件库组件和业务混合的组件。业务混合的比如支付组件弹窗，一些全局级联组件，这些是和业务相关的，你无法拆分到其他项目中使用。如果和非业务组件混合在一起，虽然可以，但是不好找。并且一个有想法的人应该会想着这些非业务组件其实慢慢积累就形成了类似ElementUI之类的组件库。
3、mixin
虽然都不提倡使用mixin，毕竟这玩意是全局污染的，如果编辑器不给力，你真不好找定义在哪。但是如果有的话请放在这里。
4、pages（views）
1、为什么不用view文件了呢？主要是小程序的影响，这样看着更加直观。
2、然后为什么不采用业务模块划分路由文件呢？
是因为你的页面实际上和业务关系确实很大，但是路由实际上是业务无关的是可以随意组合成为一个新的业务组合，那如果你早期根据业务严格划分了路由文件。后期又要拆怎么办呢？那不就乱套了。所以感觉一个路由一个文件。不要层层嵌套了
3、关于文件和组件的划分主要是为了让结构更加清晰。所有东西堆在一起页面小还好，多了就很麻烦了
5、power
这个文件没有严格的划分，你也可以放在业务组件中或者其他。我提出来的原因是因为这个是全局影响的，必定是处于业务最上层的。
6、router
大家应该都差不多这么干，但是我看很多开源的组件库之类的会把router和菜单配置结合在一起。然后把路由守卫等提取到另一个文件下面去。
这里最大的问题是你的路由和页面严重耦合，有些甚至为了路由的简化书写，采用上层名称和下层名称相互结合形成一个新的路由。但是你们要想想后端一般怎么权限配置的，是不是就一个路径就行了。然后后端返回的时候是全路径，那么你就很痛苦了。因为你无法清晰的把控页面路径是什么。并且路由冲突的可能性会加剧。所以我这个文件夹只是做路由在代码层面的注册就行了。别和业务严重耦合了，后端可不会说迁就前端来做东西。小公司前端岂不是更加！
7、store
个人做法：作为前端的数据库（就像以前后台会在数据库写存储过程书写业务逻辑，但是现在不需要了），只做数据缓存，并且结合插件融合storege缓存。只做数据缓存，并且统一全局的缓存操作。不允许其他页面独立api操作缓存函数。
这个就有的说到了，需要讲讲历史了。
A、先说说大家都怎么干的
1、umi.js（react框架）：redux等等
2、vue：vuex
一般都采用这个文件夹作为一个全局的数据共享中心。其实说一句vue做的不是很好的地方在于大家一开始就用错方式了。react实际上是每个业务文件都会有一个store.js文件。这是为了提取公共的部分，为了避免react一些性能问题和数据聚合共享方面的方式所以每个文件下面一个。
到了vue的时候大家觉得放在全局很好。但是把和业务严重耦合部分放在全局真的很不优雅。层次这么高，容易让人觉得这个数据是可以大范围共享的。实际上仅仅是为了一个业务需要而做的。
B、新的api和数据共享方式让store的职能越来越无用
1、react：hooks的出现，provide使用
2、vue：vue.observable，provide，hooks
3、js文件内存缓存机制
这里每一种都可以让store这种方式被取代，并且让数据共享和缓存更好的和业务相互嵌合。更加优雅，并且不会增加首屏的加载速度
所以我把store定义成了一个前端数据库，一个只做数据全局缓存的地方。并且统一缓存操作，把混乱的localStorge等等缓存操作统一化。那么结构就更加清晰了
8、theme（主题）
这里其实最早是从assets的css文件夹提出来的。因为我们会有很多公共的css样式需要全局使用。或者需要scss等的函数，还有存在全局换肤等等。那么提出来，会更加直观。
9、tool（utils）
工具函数集合，没啥好讲的
10、App.vue，CreateApp.js，main.js
主要是讲下main.js和CreateApp.js
不管新手老手，都喜欢把指令啊，工具函数啊都放在main.js但是入口文件很有必要保持一个清晰的结构。入口文件就像package.json一样，应该让人一眼可以清晰的知道这个项目的依赖情况还有基本入口的。搞那么多业务工具职责就乱了。
三、原则总结
1、这样划分的原因是为了项目更加直观简单，不让让接手的人耗费在无意义的项目结构熟悉上
2、做到复制的是什么，你用的时候就是什么，代码效率提升很大
3、规范跟着项目走，一刀切容易让人反感。
个人比较推荐使用webstorm开发，这恐怕是老时代的人更加喜欢一些。要不是这货收费，vscode就没有什么事情了。不管是性能，开发效率上webstorm上完爆。仅仅是定义跳转这件事上就完爆。
推荐：
阿里前端九部文档：https://www.yuque.com/fe9/basic
我的掘金文章地址：https://juejin.cn/post/6967537686571647013/
————————————————
版权声明：本文为CSDN博主「海天酱油zz」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_32858649/article/details/117379970
四、
vue-element-admin的src文件夹目录结构分析
1.api:各种接口请求
2.assets:存放静态资源
3.components:通用组件
4.directive:自定义指令
5.filters:自定义过滤器
6.icons:图标组件
7.layout:布局组件
8.router:路由配置
9.store:状态管理
10.styles:自定义样式
11.utils:通用工具方法
11.1.auth.js: token存取
11.2.permission.js:权限检查
11.3.request.js:axios的二次封装(重点)
11.4.index.js:工具方法
12.views:页面(业务组件)
13.permission.js:登录认证和路由跳转(重点)
14.setting.js:全局配置
15.main.js:全局入口文件
16.App.vue:全局入口组件
