Vue

文件命名

单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)。

单词大写开头对于代码编辑器的自动补全最为友好，因为这使得我们在 JS(X) 和模板中引用组件的方式尽可能的一致。然而，混用文件命名方式有的时候会导致大小写不敏感的文件系统的问题，这也是横线连接命名同样完全可取的原因。

MyComponent.vue 或
my-component.vue

应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V· ```javascript components/ |- BaseButton.vue |- BaseTable.vue |- BaseIcon.vue

components/ |- AppButton.vue |- AppTable.vue |- AppIcon.vue

components/ |- VButton.vue |- VTable.vue |- VIcon.vue

<br />
- **只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性。**
```javascript
components/
|- TheHeading.vue
|- TheSidebar.vue

和父组件紧密耦合的子组件应该以父组件名作为前缀命名。 ```javascript components/ |- TodoList.vue |- TodoListItem.vue |- TodoListItemButton.vue

components/ |- SearchSidebar.vue |- SearchSidebarNavigation.vue


- **组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾。**
> “为什么我们给组件命名时不多遵从自然语言呢？”
> 编辑器通常会按字母顺序组织文件，所以现在组件之间的重要关系一目了然。
```javascript
components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue

在单文件组件、字符串模板和 JSX 中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做。

dom模板就是直接写在html文件中

<!-- 在单文件组件、字符串模板和 JSX 中 -->
<MyComponent/>
<!-- 在 DOM 模板中 -->
<my-component></my-component>

对于绝大多数项目来说，在单文件组件和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的。

还请注意，如果你已经是 kebab-case 的重度用户，那么与 HTML 保持一致的命名约定且在多个项目中保持相同的大小写规则就可能比上述优势更为重要了。在这些情况下，在所有的地方都使用 kebab-case 同样是可以接受的。

JS/JSX 中的组件名应该始终是 PascalCase 的，尽管在较为简单的应用中只使用 Vue.component 进行全局组件注册时，可以使用 kebab-case 字符串。

Vue.component('MyComponent', {
  // ...
})
Vue.component('my-component', {
  // ...
})
import MyComponent from './MyComponent.vue'
export default {
  name: 'MyComponent',
  // ...
}

总结：sfc文件尽量用大驼峰命名和使用，

组件名应该倾向于完整单词而不是缩写。

components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue

在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。
```
props: {
greetingText: String
}
<WelcomeMessage greeting-text="hi"/>
```
书写顺序
sfc文件的options顺序 ```javascript name components directives filters mixins model

props/propsData

data computed watch

beforeCreate created beforeMount mounted beforeUpdate updated activated deactivated beforeDestroy destroyed

methods


- ** attribute 顺序**
```jsx
is
v-for
v-if
v-else-if
v-else
v-show
v-pre
v-once
id
ref
key
v-model
其它 attribute (所有普通的绑定或未绑定的 attribute)
事件 (组件事件监听器)
v-on
v-html
v-text

router

path 命名尽量与 vue 文件的目录结构保持一致，因为目录、文件名都是 kebab-case，这样很方便找到对应的文件
name 命名和 component 组件名保持一致！（因为要保持keep-alive 特性，keep-alive 按照 component 的 name 进行缓存，所以两者必须高度保持一致）

文件目录

目录名按照上面的命名规范，其中 components 组件用大写驼峰，其余除 components 组件目录外的所有目录均使用 kebab-case 命名。

src
源码目录
|-- api
所有 api 接口
|-- assets
静态资源，images, icons, styles 等
|-- components
公用组件
|-- router
路由，统一管理
|-- store
vuex,统一管理
|-- views
视图目录
| |-- role
role 模块名
| |-- |-- role-list.vue
role 列表页面
| |-- |-- role-add.vue
role 新建页面
| |-- |-- role-update.vue
role 更新页面
| |-- |-- index.less
role 模块样式
| |-- |-- components
role 模块通用组件文件夹

https://developer.aliyun.com/article/645697

https://juejin.cn/post/6844903652096770055

https://www.mdnice.com/writing/93253bb711244f938933d16f30e1f6fa

前端精进之路

vue规范总结

Vue

文件命名

书写顺序

router

文件目录