vue前端开发规范大全

1.项目文件命名

短横线分隔 例如:my-project-name

2.目录命名

参照项目命名规则，有复数结构时，要采用复数命名法。例：docs、assets、components、directives、mixins、utils、views。

my-project-name/
|- BuildScript // 流水线部署文件目录
|- docs // 项目的细化文档目录（可选）
|- nginx // 部署在容器上前端项目 nginx 代理文件目录
|- node_modules // 下载的依赖包
|- public // 静态页面目录
|- index.html // 项目入口
|- src // 源码目录
|- api // http 请求目录
|- assets // 静态资源目录，这里的资源会被 wabpack 构建
|- icon // icon 存放目录
|- img // 图片存放目录
|- js // 公共 js 文件目录
|- scss // 公共样式 scss 存放目录
|- frame.scss // 入口文件
|- global.scss // 公共样式
|- reset.scss // 重置样式
|- components // 组件
|- plugins // 插件
|- router // 路由
|- routes // 详细的路由拆分目录（可选）
|- index.js
|- store // 全局状态管理
|- utils // 工具存放目录
|- request.js // 公共请求工具
|- views // 页面存放目录
|- App.vue // 根组件
|- main.js // 入口文件
|- tests // 测试用例
|- .browserslistrc// 浏览器兼容配置文件
|- .editorconfig // 编辑器配置文件
|- .eslintignore // eslint 忽略规则
|- .eslintrc.js // eslint 规则
|- .gitignore // git 忽略规则
|- babel.config.js // babel 规则
|- Dockerfile // Docker 部署文件
|- jest.config.js
|- package-lock.json
|- package.json // 依赖
|- README.md // 项目 README
|- vue.config.js // webpack 配置

3.图像命名

全部采用小写方式， 优先选择单个单词命名，多个单词命名以下划线分隔。

logo.gif
pic_people.jpg

4.html命名

全部采用小写方式， 优先选择单个单词命名，多个单词命名以下划线分隔。

success.html
error_report.html

5.css命名

全部采用小写方式， 优先选择单个单词命名，多个单词命名以短横线分隔。

normalize.less
input-number.scss

6.js命名

全部采用小写方式， 优先选择单个单词命名，多个单词命名以短横线分隔。

util.js
date-util.js

7.vue组件命名

单文件组件名应该始终是单词大写开头 (PascalCase)

MyComponent.vue

8.vue组件名字命名

组件名应该始终是多个单词，应该始终是 PascalCase 的。 根组件 App 以及 、 之类的 Vue 内置组件除外。这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的。

export default {
name: 'ToDoList',
// ...
}

9.prop命名

在声明 prop 的时候，其命名应该始终使用 kebab-case

<WelcomeMessage greeting-text="hi"/>
export default {
  name: 'MyComponent',
  // ...
  props: {
    greetingText: {
      type: String,
      required: true,
      validator: function (value) {
        return ['syncing', 'synced',].indexOf(value) !== -1
      }
    }
  }
}
}

10.router命名

Vue Router Path 命名采用 kebab-case 格式

{
path: '/user-info', // 能解析成 user info
name: 'UserInfo',
component: UserInfo,
meta: {
title: ' - 用户',
desc: ''
}
},

11.模板中组件命名

<MyComponent><MyComponent/>

12.变量命名

命名方法：camelCase
命名规范：类型 + 对象描述或属性的方式

let tableTitle = "LoginTable"
let mySchool = "我的学校"

13.常量命名

命名方法：全部大写下划线分割
命名规范：使用大写字母和下划线来组合命名，下划线用以分割单词

const MAX_COUNT = 10
const URL = 'http://test.host.com'

14.方法命名

命名方法：camelCase
命名规范：统一使用动词或者动词 + 名词形式

// 1、普通情况下，使用动词 + 名词形式
jumpPage、openCarInfoDialog

// 2、请求数据方法，以 data 结尾
getListData、postFormData

// 3、单个动词的情况
init、refresh

15.自定义事件命名

自定义事件应始终使用 kebab-case 的事件名

this.$emit('my-event')

<MyComponent @my-event="handleDoSomething" />

而为了区分_原生事件_和_自定义事件_在 Vue 中的使用，建议除了多单词事件名使用 kebab-case 的情况下，命名还需遵守为 on + 动词 的形式，如下：

<!-- 父组件 -->
<div
  @on-clear="handleClear"
</div>

// 子组件
export default {
  methods: {
    handleTriggerItem () {
      this.$emit('on-clear')
    }
  }
}

16.事件方法命名

命名方法：camelCase
命名规范：handle + 名称（可选）+ 动词

<template>
  <div
    @click.native.stop="handleItemClick()"
    @mouseenter.native.stop="handleItemHover()">
  </div>
</template>

<script>

export default {
  methods: {
    handleItemClick () {
      //...
    },
    handleItemHover () {
      //...
    }
  }
}
</script>

链接: https://devpress.youkuaiyun.com/vue/66cd6d8013e4054e7e7e3bc3.html?dp_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6Njk2NTk4LCJleHAiOjE3MzQ0MjI1NzIsImlhdCI6MTczMzgxNzc3MiwidXNlcm5hbWUiOiJNSVNTX3poYW5nXzAxMTAifQ.cVTD9vk-VyLNEheyf2P59ZL2M-XSOv9wH5eefNfFuIw&spm=1001.2101.3001.6650.8&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Eactivity-8-121085429-blog-126375197.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Eactivity-8-121085429-blog-126375197.235%5Ev43%5Epc_blog_bottom_relevance_base2&utm_relevant_index=16