1. 命名约定
市场上常用的命名约定：
1.1 命名工程文件
1.1.1 项目名称
全部大写，用破折号分隔。 示例：我的项目名称。
1.1.2 目录名称
参考项目命名规则。 当存在复数结构时，应采用复数命名法。 示例：文档、资产、组件、指令、mixins、utils、视图。
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 CSS 文件名
全部使用大写字母，首选单个短语名称，多个短语名称用破折号分隔。
|- normalize.less
|- base.less
|- date-picker.scss
|- input-number.scss
1.1.6 JavaScript 文件名
全部使用大写字母javascript 命名规范，首选单个短语名称，多个短语名称用破折号分隔。
|- index.js
|- plugin.js
|- util.js
|- date-util.js
|- account-model.js
|- collapse-transition.js
上面的规则可以很快被记住为“静态文件用逗号，编译文件用破折号”。
1.2 Vue组件命名
1.2.1 单文件组件名称
文件扩展名为 .vue 的单文件组件。 单文件组件名称仍应以小写短语 (PascalCase) 开头。
components/
|- MyComponent.vue
1.2.2 单例组件名称
仅具有单个活动实例的组件应使用前缀 The 来命名，以表明其唯一性。
这并不意味着该组件只能在单个页面上使用，而是每个页面只能使用一次。 这些组件从不接受任何 props，因为它们是为您的应用程序定制的。 如果你发现有必要添加 props，则表明这实际上是一个可重用的组件，但目前每个页面仅使用一次。
例如，标题和侧边栏组件几乎在每个页面上都使用，并且不接受 props。 该组件是专门为此应用定制的。
components/
|- TheHeading.vue
|- TheSidebar.vue
1.2.3 基本部件名称
基础组件：不包含业务的、独立的、特定功能的基础组件，例如日期选择器、模态框等。该类组件将大量用作项目的基础控制，因此该组件的API有硬度低，可以通过不同的配置实现不同的功能。
使用特定样式和约定的基本组件（即表示性的、非逻辑的或无状态的、不涉及业务逻辑的组件）都应该以特定的前缀 - Base 开头。
基本组件可以在一个页面中多次使用，也可以在不同页面中重复使用。 它们是高度可重用的组件。
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue1.2.4 业务组件
业务组件：它不像基础组件只包含某种功能，而是被业务中的多个页面复用（具有复用性）。 它与基本组件的区别在于，业务组件只会在当前项目中使用。 用起来，它不通用，会包含一些服务，比如数据请求； 而基础组件不包含服务，可以在任何项目中使用，功能单一，例如带有数据校准功能的输入框。
与复杂业务混合在一起的组件（对自身数据和props进行相关处理），即业务组件，应该以Custom前缀命名。 业务组件位于页面中。 例如：某个页面有一个卡片列表，那些风格和逻辑与业务密切相关的卡片就是业务组件。
components/
|- CustomCard.vue1.2.5 紧耦合的组件名称
与父组件紧密耦合的子组件应以父组件名称作为前缀来命名。 由于编辑人员通常按字母顺序组织文件，因此这样做会将相关文件放在一起。
components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue1.2.6 组件名称中的短语顺序
组件名称应以高级（通常是描述性）单词开头，并以描述性修饰符结尾。 由于编辑人员通常按字母顺序组织文件，因此现在可以一目了然地了解组件之间的重要关系。 以下组件主要用于搜索和设置功能。
components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue还有一种多级目录的方法，就是把所有搜索组件放在“search”目录下，所有设置组件放在“settings”目录下。
我们只建议在特别小的应用程序（例如，100 多个组件）中执行此操作，因为搜索多级目录比滚动浏览单个组件目录需要更多的精力。
1.2.7 完整短语的成分名称
组件名称应优先使用而不是缩写。 长期以来，编辑器中的手动完成使得编写长名称变得非常便宜，而且它带来的清晰度非常有价值。 尤其应避免使用不常用的缩写。
components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue1.3 代码参数命名
1.3.1 名称
组件名称应始终是多个短语javascript 命名规范，并且仍应采用 PascalCase。 除了根组件App和Vue内置组件如. 这样做可以避免与现有和未来的 HTML 元素发生冲突，因为所有 HTML 元素名称都是单个短语。
export default {
name: 'ToDoList',
// ...
}1.3.2 道具
声明 props 时，它们的名称仍应使用驼峰命名法，并且在模板和 JSX 中仍应使用短横线命名法。
我们只是遵循每种语言的约定，这在 JavaScript 中是更自然的驼峰命名法。 在 HTML 中，它是 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
}
}
}
}
1.3.3 路由器
Vue Router Path命名采用kebab-case格式。 使用Snake（如：/user_info）或camelCase（如：/userInfo）的短语将被视为一个单词，搜索引擎很难区分语义。
// bad
{
path: '/user_info', // user_info 当成一个单词
name: 'UserInfo',
component: UserInfo,
meta: {
title: ' - 用户',
desc: ''
}
},
// good
{
path: '/user-info', // 能解析成 user info
name: 'UserInfo',
component: UserInfo,
meta: {
title: ' - 用户',
desc: ''
}
},1.3.4 模板中的组件
对于大多数项目，组件名称在单文件组件和字符串模板中应始终为 PascalCase，但在 DOM 模板中始终为短横线大小写。
<MyComponent/>
<my-component></my-component>1.3.5 自闭元件
没有内容的组件在单文件组件、字符串模板和 JSX 中应该是自关闭的——但在 DOM 模板中绝不是这样。
<MyComponent/>
<my-component></my-component>1.3.6 变量
// bad
var getTitle = "LoginTable"
// good
let tableTitle = "LoginTable"
let mySchool = "我的学校"1.3.7 常数
const MAX_COUNT = 10
const URL = 'http://test.host.com'1.3.8 方法
// 1、普通情况下，使用动词 + 名词形式
// bad
go、nextPage、show、open、login
// good
jumpPage、openCarInfoDialog
// 2、请求数据方法，以 data 结尾
// bad
takeData、confirmData、getList、postForm
// good
getListData、postFormData
// 3、单个动词的情况
init、refresh
1.3.9 自定义事件
自定义事件仍应使用短横线事件名称。
与组件和 props 不同，事件名称没有自动大小写转换。 相反，触发的风暴的名称必须与用于窃听风暴的名称完全匹配。
this.$emit('my-event') <MyComponent @my-event="handleDoSomething" /> 与组件和 props 不同，事件名称不用作 JavaScript 变量或属性名称，因此没有理由使用驼峰命名法或 PascalCase 命名法。
并且 v-on 风暴监听器将在 DOM 模板中手动转换为全部大写（因为 HTML 不区分大小写），因此 v-on:myEvent 将更改为 v-on:myevent - 使得 myEvent 不可能被窃听。
从storm原文中我们可以了解到它的使用方法如下：
<div
@blur="toggleHeaderFocus"
@focus="toggleHeaderFocus"
@click="toggleMenu"
@keydown.esc="handleKeydown"
@keydown.enter="handleKeydown"
@keydown.up.prevent="handleKeydown"
@keydown.down.prevent="handleKeydown"
@keydown.tab="handleKeydown"
@keydown.delete="handleKeydown"
@mouseenter="hasMouseHoverHead = true"
@mouseleave="hasMouseHoverHead = false">
