Vue 开发规范

参考uniapp 文档 大神的笔记

1. 命名规范

对于项目名和目录名 连字符和下划线比较有争议,本文以连字符为主
连字符 my-project-name
下划线 my_project_name

1.1 项目文件命名

1.1.1 项目名

全部采用小写方式， 以短横线分隔。例：my-project-name

1.1.2 目录名

• 参照项目命名规则，有复数结构时，要采用复数命名法。例：docs、assets、components、directives、mixins、utils、views。
• 超过一个单词一般采用kebab-case命名形式
  • 全部采用小写方式， 以短横线分隔。例：my-project-name

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 配置

1.1.3 图像文件名

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

banner_sina.gif
menu_aboutus.gif
menutitle_news.gif
logo_police.gif
logo_national.gif
pic_people.jpg
pic_TV.jpg

1.1.4 HTML 文件名

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

|- error_report.html
|- success_report.html

1.1.5 JavaScript 文件名

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

|- index.js
|- plugin.js
|- util.js
|- date-util.js
|- account-model.js
|- collapse-transition.js

1.1.6 js中的变量名

• 标准变量采用驼峰式命名（除了对象的属性外，主要是考虑到cgi返回的数据）eg: var myFirstName
• 'ID’在变量名中全大写 eg: var goodID
• 'URL’在变量名中全大写eg: var reportURL
• 常量全大写，用下划线连接 eg: var MAX_INDEX = 1
• 构造函数，大写第一个字母 eg: function Person(name)

1.1.7 CSS 文件名

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

|- normalize.less
|- base.less
|- date-picker.scss
|- input-number.scss

1.1.8 css,sass,less 的类名和 id 命名

• 类名使用小写字母,以中划线分割 eg: my-first-name
• id 采用驼峰式命名 eg: #myFirstName
• 公用css类名用中间用下划线 eg: text_10 { font-size: 20rpx; line-height: 1.5; }

---

1.2 Vue 组件命名

1.2.1 单文件组件文件

单文件组件的文件名应该要么始终是单词大写开头,要么始终是横线连接

• 单词首字母大写命名 : PascalCase 如: MyComponent.vue
• 以小写开头,短横线分隔命名 : kebab-case 如 : my-component.vue

1.2.2 模版中的组件名大小写

对于绝大多数项目来说，在单文件组件和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的。最好的做法就是统一写成这个形式：

	<my-component></my-component>

1.2.3 Prop名大小写

在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。在 JavaScript 中更自然的camelCase。

props: {
	greetingText: String
}

而在 HTML 中则是 kebab-case。

<WelcomeMessage greeting-text="hi"/>

1.2.4 事件名

这个与之前介绍的组件和prop都不相同，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。 举个例子，如果触发一个 camelCase 名字的事件：

this.$emit('myEvent')

则监听这个名字的 kebab-case 版本是不会有任何效果的：

<my-component v-on:my-event="doSomething">my-component>

官网: 不同于组件和 prop，事件名不会被用作一个 JavaScript 变量名或 property 名，所以就没有理由使用 camelCase 或PascalCase 了。并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。

因此，我们推荐你始终使用kebab-case 的事件名。

2. vue 方法命名

2.1 vue 方法放置顺序

- components
- props
- data
- created
- mounted
- activited
- update
- beforeRouteUpdate
- methods
- filter
- computed
- watch

2.3 data props 方法注意点

1、使用 data 里的变量时请先在 data 里面初始化
2、props 指定类型，也就是 type
3、props 改变父组件数据 基础类型用 $emit ，复杂类型直接改
4、ajax 请求数据用上 isLoading、isError 变量
5、不命名多余数据，现在是详情页、你的数据是 ajax 请求的，那就直接声明一个对象叫 d，而不是每个字段都声明
6、表单数据请包裹一层 form

生命周期方法注意点

生命周期方法注意点

• 不在mounted、created 之类的方法写逻辑，取ajax 数据
• 在 created里面监听 Bus事件

2.2 methods 自定义方法命名

1、动宾短语（优：jumpPage、openCarInfoDialog）（差：go、nextPage、show、open、login）
2、ajax 方法以        get、post 开头，以 data 结尾（优：getListData、postFormData）（差：takeData、confirmData、getList、postForm）
3、事件方法以 on 开头（onTypeChange、onUsernameInput）
4、init、refresh 单词除外
5、尽量使用常用单词开头（set、get、open、close、jump）
6、驼峰命名（优：getListData）（差： get_list_data、getlistData）

• 跳转页面: to+目录名!页面名 eg: toGoodsDetail() toMy()
• 获取方法: get+变量名 eg: getGoodsList()
• 更新方法: up+变量名 eg: uplsShaw()
• 提交方法: submit前缀 eg: submitOrderData
  • 防快速点击:提交数据需要做防快速重复点击，以3秒为例.防止重复向服务器发送数据

3. vue编码规范

1、使用ES6风格编码源码
        定义变量使用let ,定义常量使用const
        使用export ，import 模块化
2、组件 props 原子化
        提供默认值
        使用 type 属性校验类型
        使用 props 之前先检查该 prop 是否存在
3、避免 this.$parent
4、谨慎使用 this.$refs
5、无需将 this 赋值给 component 变量
6、调试信息console.log() debugger 使用完及时删除