【前端项目规范】汇总

项目命名规范

"文件夹命名": 
"a~z" + "-" + "0~9"的组合(即：字母 + "中"划线 + 数字)

"文件命名": 
"a~z" + "-" + "0~9"的组合(即：字母 + "中"划线 + 数字)

"路由命名": 
路径采用"a~z" + "-" + "0~9"的组合(即：字母 + "中"划线 + 数字)
参数采用"a~z" + "_" + "0~9"的组合(即：字母 + "下"划线 + 数字)

项目架构规范

|—— 文件夹/文件名称 // 含义 
|—— config // 配置文件 
|—— build // 脚本构建 
|—— dist // 打包编译 
|—— middleware // 中间件  
|—— plugin // 第三方插件 
|—— static/public // 静态公共资源 
|—— src // 源代码 
    |—— views // 页面
    |—— router // 路由
    |—— store // 数据状态
    |—— assets // 公共资源，一般用来放css/js/img/fonts 
        |—— styles // css文件 
            |—— base.css // 基本 
            |—— common.less // 公用 
            |—— variable.less // 变量 
        |—— scripts // js文件 
        |—— images // img文件 
        |—— fonts // fonts文件 
    |—— utility // 公共工具 
        |—— api.js // 接口 
        |—— util.js // 公共方法，和业务无关 
        |—— tool.js // 公共方法，和业务相关 
        |—— pattern.js // 正则校验 
    |—— components // 组件 
        |—— page // 页面组件 
        |—— business // 业务组件 
        |—— common // 公共组件 
        |—— layout // 布局组件 
            |—— lay-head // 头部 
            |—— lay-user // 用户 
            |—— lay-top-nav // 顶部导航 
            |—— lay-left-nav // 左侧导航 
            |—— lay-crumb // 面包屑 
            |—— lay-foot // 底部 
|—— doc // 文档 
|—— test // 测试文件 
|—— demo/examples // 示例 

项目配置规范

项目须要配置的文件：
".gitignore": 处理git需要忽略的文件
".gitattributes": 处理不同操作系统操作文件，统一结尾行
".eslintrc.js": eslint配置文件，用来检查javascript代码规范
".prettierrc.js": 配合eslint，检查代码规范

项目代码模版

"index.html": 公共页面模版 [打开链接](https://juejin.cn/editor/drafts/7077728624593338381)
"base.css": 基本样式模版 [打开链接](https://juejin.cn/editor/drafts/7077729981345824782)
"variables.less": 变量样式模版 [打开链接](https://juejin.cn/editor/drafts/7078105113906118692)
"common.less": 公共样式模版 [打开链接](https://juejin.cn/editor/drafts/7077731034850131998)
"util.js": 公共方法模版 [打开链接](https://juejin.cn/editor/drafts/7078097195244716062)

项目具体规范

命名

文件夹命名

全部采用"小写"方式，可用"中划线"分隔，可用"数字"，注意：单词不用复数
// 即："a~z" + "-" + "0~9"的组合
// 例：
// 分类
// 平台分类
// 店铺分类，
// 如：
// category
// platform-category
// store-category 

另外，项目框架已有的一些文件夹，或跟业务无关的文件夹，单词可使用复数
// 例：
// components
// pages
// views
// assets
// plugins
// fonts
// images
// styles
// scripts
// 等

文件命名

文件命名的规范，和文件夹命名规范相似
全部采用"小写"方式，可用"中划线"分隔，可用"数字"，注意：单词不用复数
// 即："a~z" + "-" + "0~9"的组合
// 例：
// store-category-list
// list
// detail
// add
// edit
// delete
// import
// export
// 等

另外，项目框架已有的一些文件，或跟业务无关的文件，单词可使用复数
// 例：
// apis
// utils
// tools
// helpers
// routes
// 等

路由命名

文件命名的规范，和文件夹命名规范相似
路由路径全部采用"小写"方式，可用"中划线"分隔，可用"数字"，注意：单词不用复数
即："a~z" + "-" + "0~9"的组合
// 例：
// /store-category/list
// /store-category/detail/:id
// /store-category/add
// /store-category/edit/:id
// /store-category/delete/:id
// /store-category/import/:id
// /store-category/export/:id
// 等

路由参数全部采用"小写"方式，可用"下划线"分隔，可用"数字"，注意：单词不用复数
即："a~z" + "_" + "0~9"的组合
// 例：
// id=xxx
// parent_id=xxx
// store_category_id=xxx
// goods_code=xxx
// order_code=xxx
// store_code=xxx
// 等

配置

.gitignore

处理git需要忽略的文件

# .gitignore

# 用途
# 不需要git跟踪的文件，忽略的文件

# mac 系统文件夹自带文件
.DS_Store

# 依赖文件
/node_modules/

# 打包文件
/dist/

# 报错文件
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# 编辑器相关文件
.idea
.vscode

# Visual Studio 相关文件
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

.gitattributes

处理不同操作系统操作文件，统一结尾行

# .gitattributes

# 问题描述
# Windows操作系统的换行符默认是：crlf, 即: \r\n(回车换行)
# Linux, MacOS操作系统的换行符默认是: lf, 即: \n(换行)
# 项目切换操作系统进行开发，行尾就变了

# 解决方案
# 每当一个文件被创建或保存，git 会按照这些属性所指定的自动化的保存文件
# 用于不同操作系统每次更改，配置文件的结尾行保存都是统一的风格

# 使用方法
# 匹配的文件, 是否设置, elo=lf
# text: 设置
# -text: 不设置
# eol属性: end of line, 即: 行尾

*.html text eol=lf
*.js text eol=lf
*.json text eol=lf
src/**/*.css text eol=lf
src/**/*.less text eol=lf
src/**/*.scss text eol=lf

.eslintrc.js

eslint配置文件，用来检查javascript代码规范

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  plugins: ['prettier'],
  extends: [
    'prettier',
    'eslint:recommended',
    'plugin:prettier/recommended',
    'plugin:vue/recommended',
    'prettier/vue'
  ],

  // add your custom rules here
  rules: {
    'handle-callback-err': 'off',
    'no-lonely-if': 'off',
    'vue/require-prop-types': 'off',
    'unicorn/error-message': 'off',
    'no-useless-return': 'off',
    'prettier/prettier': 'error'
  }
}

.prettierrc.js

配合eslint，检查代码规范

module.exports = {
  printWidth: 100, // 超出字符换行（默认：80）
  tabWidth: 2, // tab缩进字符（默认：2）
  proseWrap: 'preserve', // 超出字符换行方式，按原样显示（默认）
  useTabs: false, // 不使用tab缩进（默认：false）
  singleQuote: true, // 使用单引号
  semi: false, // 不使用分号
  trailingComma: 'none', // 不使用行尾逗号
  arrowParens: 'always', // 不省略括号（箭头函数）(x) => { x }
  bracketSpacing: true, // 对象中的空格，例如：{ foo: bar }（默认：true）
  quoteProps: 'as-needed', // 对象中的引号(仅在需要时在对象属性周围添加引号)
  jsxBracketSameLine: false, // JSX闭合标签换行显示(<div></div>)
  endOfLine: 'auto' // 换行符使用，保持现有的行尾设置（默认：auto）
}