目录结构

此结构是基于cli生成的传统node项目结构。

通过HBuilderX创建的uniapp项目与此结构存在差异。

vue-project
├─ public
│  ├─ favicon.ico
│  └─ index.html
├─ README.md
├─ src
│  ├─ api // 请求方法
│  ├─ App.vue
│  ├─ assets(static) // 静态资源 
│  │  ├─ css
│  │  ├─ iconfont
│  │  └─ image
│  │     └─ logo.png
│  ├─ components // 公共组件
│  │  ├─ BaseButton.vue
│  │  ├─ TheHeader.vue
│  ├─ config // 配置文件 例：主题风格配置，项目基础属性配置
│  │  └─ defaultConfig.js
│  ├─ core // 核心工具函数
│  │  ├─ directives // 自定义指令
│  │  ├─ mixins  // mixins
│  │  └─ permission  // 权限管理
│  ├─ layouts // 项目整体布局结构
│  │  └─ BaseLayout.vue
│  ├─ locale // 多语言
│  │  ├─ index.js
│  │  └─ lang
│  │     └─ zh_CN
│  ├─ main.js // 入口文件
│  ├─ plugins // 引入第三方sdk、插件
│  ├─ router // 路由
│  │  └─ index.js
│  ├─ store // 仓库
│  │  ├─ index.js
│  │  └─ modules 
│  │     ├─ login.js
│  │     └─ logout.js
│  ├─ utils // 工具函数
      ├─ http.js
│  │  └─ utils.js
│  └─ views // 页面
│     ├─ Login  // 如果文件夹下只有一个`.vue`，可以省略文件夹直接创建`.vue`；如果有多个`.vue`，核心文件可命名为`index.vue`或者与文件夹同名
│     └─ Table
├─ .env // 基础环境变量
├─ .env.development // 开发环境变量
├─ .env.test // 测试环境变量。  生产环境变量由运维配置，不要放在代码里
├─ .eslintrc.js // eslint 配置
├─ .prettierrc.js // 格式化配置
├─ babel.config.js
├─ jsconfig.json
├─ package-lock.json
├─ package.json
└─ vue.config.js

命名规范

1.常见命名方式

PascalCase 大驼峰命名：首字母大写
camelCase 小驼峰命名：首字母小写
Snake下划线连接
kebab-case 短横线链接

2.文件名称的规范

命名要让阅读者易于理解，杜绝不规范的缩写

拼音或者英文单词，二者不能混用

尽量避免使用纯拼音

正例：shenzhen/rmb

反例：DazheProduct

1.项目名称、目录名

全部使用小写单词，多个单词使用短横线进行连接。

如果目录有复数结构，要使用复数的方式命名。

项目名称

正例：my-project-demo

反例：my_project_demo / myProjectDemo

目录名

正例：scripts/components/images/utils/layouts/js-sdk/demo-plugin

反例：demo_scripts/demoPlugin

2.HTML、JS、CSS、图片静态资源文件

命名优先使用单词，多个单词使用短横线进行连接。

正例：index.html/render-demo.js/public.css/home-logo.png

反例：renderDemo.js/HomeLogo.png

图片文件建议使用下划线进行连接，方便开发时在编辑器中双击选中名称

3.css规范

1.命名

class使用小写字母，短横线连接
id采用小驼峰式
scss变量、函数采用小驼峰式

2.选择器

避免使用标签选择器
子选择器替代后代选择器
选择器独占一行
避免嵌套层级过多，影响可读性（深度限制3级）

3.属性

尽量使用缩写属性

margin/padding/border/font...

属性独占一行
省略0后面的单位

4.尽量少使用行内样式

4.JavaScript规范

1.声明变量、方法名、参数名、局部变量都使用小驼峰式命名

tableTitle/userName/productInfo

方法名必须是动词或动词 + 名词的形式

正例：openUserInfoDialog/saveUserInfo/init/refresh

反例：save/go/get

增删改查：add/delete/update/get

动词	含义	返回值
can	判断是否可执行某个动作 (权限)	函数返回一个布尔值。true：可执行；false：不可执行；
has	判断是否含有某个值	函数返回一个布尔值。true：含有此值；false：不含有此值；
is	判断是否为某个值	函数返回一个布尔值。true：为某个值；false：不为某个值；
get	获取某个值	函数返回一个非布尔值
set	设置某个值	无返回值、返回是否设置成功或者返回链式对象

2.常量

全部大写，多个单词用下划线连接

const MAX_NUM = 998
const URL = 'www.baidu.com'
const ID = 1

3.代码风格

使用tab缩进（使用 2空格缩进）
统一使用单引号'string'
不同逻辑的业务代码使用一个空行隔开
使用ES6+
避免三元运算符嵌套

5.Vue

1.基础组件

不包含业务，独立、具体功能的基础组件，比如模态框、日期选择器等。

他可以一个页面或者多个页面高度复用，命名前面加一个Base代表是基础组件。

BaseButton.vue
BaseIcon.vue
BaseTable.vue![2d5aa89c12fd9d5ee294642e6c35eaad.png](/uploads/projects/web-rules/17999abcafbd0142.png "2d5aa89c12fd9d5ee294642e6c35eaad.png")

2.业务组件

在组件内部进行逻辑操作的组件可以分为业务组件，可以在某项业务中被多次复用。

组件命名采用大驼峰方式，前缀建议和具体业务保持一致，或者使用custom。

可以根据实际需求将组件放在业务独立的components下。

ProductInfo.vue
ProductList.vue
CustomProduct.vue

多个关联的父子组件，命名前缀保持一致。

TableList.vue
TableListItem.vue
TableListItemButton.vue

3.单例组件

只有单个活跃的实例的组件叫单例组件。它在每个页面只使用一次，不接受任何prop，只是为应用提供支持，比如页头、页脚等。命名前缀加上The

TheHeader.vue
TheFooter.vue

4.组件引用方式

<MyComponent>my Component</MyComponent>

5.name

组件名称应为多个单词并使用大驼峰方式。

export default {
    name:'MyComponent'
}

6.prop

声明prop使用小驼峰方式，在模版中使用短横线方式。

声明prop要尽量详细，至少要有类型和初始值。

<MyComponent :product-name="1000"></MyComponent>

export default {
    props:{
        productName:{
            type: Number,
            default: 999
        }
    }
}

7.自定义事件使用短横线进行连接。

<MyComponent @on-change="handleItemClick"></MyComponent>
this.$emit('on-change')

8.模版语法只使用简单的表达式，复杂的表达式应使用计算属性和方法

9.必须为 v-for 设置键值 key，且值不是 index

10. v-show 与 v-if 的合理选择

11. script 内部结构顺序

components > props > data > computed > watch > filter > 钩子函数（钩子函数按其执行顺序） > methods

6. Vue-router

1.组件懒加载，import()

2.path与目录名保持一致，但使用短横线连接

3.path应以/开头

4.name 与组件名称保持一致

name:'UserInfo'
// ----
{
    path:'/user-info',
    name:'UserInfo'
}

7.注释

代码要写注释，要尽量详细

工具函数一定要标明函数作用，参数与返回值

8.其他规范

router、store根据业务模块进行拆分管理，尽量与views文件保持一致
api接口命名与views保持一致
公共组件形成使用说明
node版本统一，防止装包出现错误

代码风格、格式化控制

eslint + standard + prettier

standard规则

1.安装eslint

npm i eslint -D

2.初始化eslint并生成配置文件

npx eslint --init

3.测试eslint是否集成成功

// package.json
  "scripts": {
    "lint": "eslint src/**/*.{js,vue} --fix"
  }
// 运行命令检查代码
npm run lint

可能会出现下面的错误，出现的代表eslint集成成功了

4.添加git commit 自动触发eslint检测并修复（可选）

4.1 安装 lint-staged 对git 暂存区文件进行检查的工具

npm i lint-staged --save-dev
// package.json 
{
    // ... 与scripts 同级    
    "lint-staged": {
    "*.{vue,js}": [
      "npm run lint"
    ]
  }
}

4.2 安装husky 实现自动git提交时执行 lint-staged

npm i husky --save-dev
// package.json 配置命令 用来在安装项目依赖时生成 husky 相关文件
{
  // ...
  "scripts": {
    // ...
    "postinstall": "husky install"
  },
}

4.3 配置后执行 npm i 就会在项目根目录生成.husky/_ 目录

4.4 生成监听git操作的脚本

npx husky add .husky/pre-commit "npx lint-staged"

此时commit会自动触发eslint检测，出现的问题需要手动修复

5.加入prettier

加入prettier控制代码格式化风格，当eslint与prettier出现冲突时，以prettier为主

prettier - prettier 本体
eslint-config-prettier - 关闭 ESLint 中与 Prettier 中发生冲突的规则
eslint-plugin-prettier - 将 Prettier 的规则设置到 ESLint 的规则中

1.安装

npm i prettier eslint-config-prettier eslint-plugin-prettier -D

如果安装报错是因为eslint 和 eslint-plugin-prettier版本搭配不正确。指定eslint-plugin-prettier版本即可

2.添加格式化配置文件 .prettierrc.js

module.exports = {
    useTabs: false, // 采用tab缩进还是空白缩进
    tabWidth: 2, // Tab键宽度
    printWidth: 80, // 宽度限制 
    singleQuote: true, //字符串是否使用单引号
    trailingComma: "none", //是否使用尾逗号
    bracketSpacing: true, // 是否保留括号中的空格 默认true
    bracketSameLine: true, // 标签箭头位置
    semi: false,  // 使用分号, 默认true
    arrowParens: 'always', // 箭头函数参数加括号
    singleAttributePerLine: true, // 属性独占一行
    htmlWhitespaceSensitivity:'ignore', // html标签 > 位置
}

3.修改eslint配置

module.exports = {
    // ...
  extends: [
    'standard',
    'plugin:vue/vue3-essential',
  + 'prettier'
  ]
  plugins: [
    'vue',
  + 'prettier'
  ]
}

git提交规范

<type>(scope): <subject>
// 注意冒号 : 后有空格
// 如 feat(user): 增加用户中心的 xx 功能
// 如 fix(product): #禅道bugID 修复了xxx

scope 表示 commit 的作用范围，如用户中心、购物车中心，也可以是目录名称，一般可以限定几种
subject 用于对 commit 进行简短的描述
type 必填，表示提交类型，值一般有以下几种：
- feat：新功能 feature
- fix：修复 bug
- style：代码格式(不影响代码运行的变动)；
- bug：测试反馈 bug 列表中的 bug 号
- ui：更新UI；
- docs：文档注释变更
- refactor：重构、优化(既不增加新功能，也不是修复bug)；
- perf：性能优化；
- release：发布；
- deploy：部署；
- test：增加测试
- chore：构建过程或辅助工具的变动
- revert：回退
- build：打包

前端开发规范