Carloin

# 一.Vue 项目目录规范

├── dist                        // [生成] 打包目录
├── src                         // [必选] 开发目录
│    ├── views                  // [必选] 页面组件，不允许有其他类型组件混入
│    ├── components             // [必选] 业务组件必须写在这里
│    ├── libs                   // [可选] 公共库（一般用于对一些库的封装）
│    ├── utils                  // [可选] 工具库（用于一些函数方法之类的库）
│    ├── assets                 // [可选] 公共资源（被项目引用的经过webpack处理的资源）
│    ├── store                  // [可选] 数据存储 vuex
│    ├── route                  // [可选] 路由
│    ├── style                  // [可选] 公共样式
│    ├── App.vue                // [必选] 根组件
│    └── main.(js|ts)           // [必选] 入口文件
├── public                      // [必选] 不会被webpack编译的资源
│    ├── index.html             // [必选] 模板
│    └── logo.png               // [可选] 项目 logo
├── config                      // [可选] 配置目录
├── mock                        // [可选] mock 数据
├── test                        // [可选] 测试代码
├── docs                        // [可选] 文档
│── .gitignore                  // [必选] git 忽略的文件
│── .editorconfig               // [必选] 编译器配置
│── .npmignore                  // [可选] 如果是 npm 包是必选
│── jsconfig.json               // [可选] 用于 vscode 配置
├── README.md                   // [必选] 导读
├── package.json                // [必选] 大家都懂
└── ......                      // [可选] 一些工具的配置，如果 babel.config.js 等

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# components、views 具体职能划分

components 只写公共组件，页面附带组件写在 views 内

└── src
     ├── views
     │    └── home
     │         ├── index.vue
     │         ├── Banner.vue
     │         └── Card.vue
     ├── components
     │    ├── Swiper.vue
     │    └── Button.vue
     ├── store                 // 对于较大的项目，建议按业务模块拆分管理
     │    ├── index.js
     │    ├── home.js
     │    └── mine.js
     ├── route                 // 对于较大的项目，建议按业务模块拆分管理
     │    ├── index.js
     │    ├── home.js
     │    └── mine.js
     └── assets                // 重复使用的公共资源放在顶层 assets 文件，避免重复定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 二.React 项目目录规范

# 网络上总结

src
| -- components  // 公共组件
        | -- commonA
                | -- index.jsx
                | -- style.css
| -- reducers // 公共 reducers
| -- actions // 公共 actions
| -- sagas // 公共 sagas，如果需要的话
| -- containers
        | -- A
             | -- components // 私有组件
                     | -- A1
                           | -- index.jsx
                           | -- style.css
             | -- index.jsx // react 组件
             | -- actions.js // action 文件，可视复杂度成为一个文件夹
             | -- style.css // 样式文件，或者 less / sass
             | -- reducers.js // reducer 文件，可视复杂度成为一个文件夹
             | -- sagas.js // sagas 文件，可视复杂度成为一个文件夹
        | -- B
             | -- index.jsx
             | -- actions
                     | -- index.js
                     | -- actionA.js
                     | -- actionB.js
             | -- style.css
             | -- reducers.js
                     | -- index.js
                     | -- reducerA.js
                     | -- reducerB.js
| -- main.js # 入口文件
| -- routes.js # 路由，简单的话可以写在 main.js 里

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

大概这样组织是比较合理的，保证几个原则：

组件的整理：一开始开发项目的时候，因为项目简单，可能不会有公共组件(src/components)，一般都是写在 src/containers/A/components，等你下个 cotainer 再次使用到这个组件的时候，再把它抽出来，放到公共组件里。最好这样做，千万不要使用一个组件就放在公共组件里，这样看似规整，但是一旦需求变化，这个 container 要删除，你还要在公共组件里找这个组件，删除的时候，你还不知道别的 container 有没有引用。这是很头疼的，如果按照这个原则来做，可以直接把这个 container 文件夹直接删除，不会有任何问题
公共 actions / reducers ：一般放置你在任何 container 中都会使用到的数据，比如用户名、服务器时间等等，否则的话，还是放在对应的 container 里，理由同上。
然后每个 container 中 actions、reducers 都可以是文件(src/containers/A)，或者是文件夹(src/containers/B)，但是要团队约定好，这样每个 container 都会很整齐。
最后，说下 containers 这个文件夹。一般来说，A 、B 这两个 container 是和路由对应的。但是，一旦项目复杂到一个页面需要多个 container 的时候，可以考虑：

src |
--components |
--actions |
--reducers |
--sagas |
--pages | // 对应路由
  --A |
  --components |
  --actions.js |
  --reducers.js |
  --style.css |
  --containers |
  --C1 |
  --C2;

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# antd-pro

├──config                   // 配置文件
│   ├── config.js           // 路由定义文件&&代理路径文件
│   ├── defaultSettings.js  // 主题颜色以及标题配置文件
│   ├──plugin.config.js     // 没怎么用过的配置文件
│
├── mock                     // 本地模拟数据
├── public
│   └── favicon.ico          // Favicon
├── src
│   ├── assets               // 本地静态资源
│   ├── common               // 应用公用配置，如导航信息
│   ├── components           // 业务通用组件
│   ├── e2e                  // 集成测试用例
│   ├── layouts              // 通用布局
│   ├──locales                 // 国际化文件
│   ├── models               // dva model,全局model文件 定义全局请求函数
│   ├── routes               // 业务页面入口和常用模板
│   ├── services             // 后台接口服务,发起请求文件
│   ├── utils                // 工具库
│   ├── g2.js                // 可视化图形配置
│   ├── theme.js             // 主题配置
│   ├── index.ejs            // HTML 入口模板
│   ├── index.js             // 应用入口
│   ├── index.less           // 全局样式
│   └── router.js            // 路由入口
├── tests                    // 测试工具
├── README.md
└── package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# 三.9 个前端代码规范秘籍

第一个秘籍： 京东凹凸实验室前端代码规范.网址是：https://guide.aotu.io/ (opens new window) ,如果公司没有具体的前端代码规范，完全可以自己按照这套规范来编写。里边包括了 HTML 规范、图片规范、CSS 规范、命名规范和 JS 规范。

优点是清晰、简单、不复杂。

第二个秘籍： 腾讯前端代码规范网址是：http://tgideas.qq.com/doc/index.html (opens new window)。也阅读他们的开源项目，他们腾讯的前端代码规范是优秀的，所以第二个推荐腾讯的代码规范文档库 TGideas.

这是腾讯前端程序员的必读规范手册，优点是有 PC 端专题、移动端专题、双端专题。这套文档，适合公司还没有代码规范，但正在建立代码规范的使用，可以抄作业，让公司有一套不错的前端代码规范。

第三个秘籍： 百度前端代码规范文档 Github 网址：https://github.com/ecomfe/spec (opens new window)。百度一直是一个相信代码能改变世界的公司，也是在中国大厂里边第一个把代码规范做成标准化的公司。所以他们的代码规范一直被模仿，值得学习。

当然，随着中国代码力量的崛起，几乎所有的大厂都有自己的代码规范，比如网易、阿里、华为、字节。如果感兴趣，在网上找到这些规范应该不难。

第四个秘籍： JavaScript Standard Style ，Github 上，网址是：https://github.com/standard/standard (opens new window) . 除了很多公司组织外，很多个人也在项目中使用规范。JavaScript Standard Style 就是个人代码规范。很多著名项目都在使用这套规范，例如 Node.js、express、MongoDB 和 Github。规范托管在需要说的是，他贴心的准备了中文版，所以非常方便我们阅读。

第五个秘籍： Vue 官方特有的代码风格指南,网址是：https://cn.vuejs.org/v2/style-guide/index.html (opens new window),在中国的前端程序员必会的一个框架就是 Vue,所以如果你不想别人嘲笑你写的 Vue 代码，阅读并遵守规范，是个非常明智的选择。

第六个秘籍： 是个人网址：http://es6.ruanyifeng.com/#docs/style (opens new window) 阮一峰的 ES6 编程风格。

第七个秘籍： 《代码整洁整洁之道》，clean code ，码神罗伯特·马丁的作品，我们尊称为 Bob 大叔。豆瓣评分 8.9 分，书中代码基于的是 Java 语言，但作为前端你也会收获很多。这本书被誉为”程序员童子军规则“，也算是必读书。

第八个秘籍： ESLint ，这不是一个文档，这是一个代码规范工具。ESLint 中文网址：https://eslint.bootcss.com/ (opens new window) 这里给出，可以自学一下。他是一个强检测的代码规范工具，也就是说如果你不按照设定的规范写，直接会报错，让你不能 Push 代码。规范规则支持自定义。

第九个秘籍： Prettier，这也是一个工具。网址；https://prettier.io/ (opens new window) 它不像 ESLint 是个强类型的代码规范工具，它显得温柔很多。但同样可以保持代码风格一致。可在 VScode 装此插件，它少了一些强制的束缚，但依然让你代码整齐划一。

# 参考

https://jspang.com/detailed?id=76

https://zhuanlan.zhihu.com/p/350580943

← 02.前端代码管理规范 04.注释规范 →