概述

本文简单描述了前端项目中目录及文件的结构和命名规范。

目录结构

现在前端都是工程化的天下，一般而言，会将整个项目分为源代码和工程配置两部分。源代码应放在/src目录下，而工程配置则一般直接放在项目根目录/下，如webpack, gulp, eslint, babel, postcss, .gitignore， package.json等配置。对于较复杂的工程配置如webpack，我们还会单独给其建一个目录build。

所以大概的目录结构会是这样：

│  .babelrc
│  .editorconfig
│  .eslintignore
│  .eslintrc.js
│  .gitignore
│  .postcssrc.js
│  favicon.ico
│  index.html
│  package-lock.json
│  package.json
│
├─.vscode
│      settings.json
│
├─build
│      build-test.js
│      build.js
│      check-versions.js
│      utils.js
│      vue-loader.conf.js
│      webpack.base.conf.js
│      webpack.dev.conf.js
│      webpack.prod.conf.js
│      webpack.test.conf.js
│
├─config
│      dev.env.js
│      index.js
│      prod.env.js
│      test.env.js
│
├─src
│  │  App.vue
│  │  main.js
│  │

命名

统一使用kebab-case（短横线）命令法来命名文件夹及文件。如common-utils, build-config。

1. 使用短横线用来分隔单词，能让使用者快速提取关键单词，保证易理解性。
2. 现在很多npm包广泛采用了kebab-case（短横线）命令法。