Vue命名规范

2024-01-13 12:54:52

参考链接:

1: https://www.cnblogs.com/amylis_chen/p/11331455.html

2: https://www.cnblogs.com/zhanglw456/p/12761008.html

1. 组件名

官方推荐的组件名是 每个单词首字母大写（PascalCase） 或者 全小写用 - 连接（kebab-case） 。在DOM中使用的时候，改为全小写，单词之间用 - 连接。

Vue.component('MyComponent', {})；    或者      Vue.component('my-component', {});
import MyComponent from 'MyComponent.vue';
export default {
    name: 'MyComponent'
}

// 在DOM中使用的时候，  <my-component></my-component>

2，props

　　声明 prop的时候， 使用驼峰命名（myProps），模板中使用的时候， 用 - 连接（my-props）

props: {
    myProps: {}
}

// DOM: <my-component :my-props="abc"></my-component>

3，自定义事件名

　　因为html对大小写不敏感，所以大写的都会被转为小写的。所以推荐 都用 -连接来命名。

this.$emit（'my-event'）;

// DOM: <my-component @my-event="abc"></my-component>

4. views 命名

views 文件夹下面是由以页面为单位的vue文件或者模块文件夹组成的，放在 src 目录之下，与 components、assets 同级。

views 下的文件夹命名

views 下面的文件夹代表着模块的名字
由名词组成（car、order、cart）
单词只能有一个（good: car order cart）（bad: carInfo carpage）
尽量是名词（good: car）（bad: greet good）
以小写开头（good: car）（bad: Car）

views 下的 vue 文件命名

views 下面的 vue 文件代表着页面的名字
放在模块文件夹之下
只有一个文件的情况下不会出现文件夹，而是直接放在 views 目录下面，如 Login Home
尽量是名词
大写开头，开头的单词就是所属模块名字（CarDetail、CarEdit、CarList）
名字至少两个单词（good: CarDetail）（bad: Car）
常用结尾单词有（Detail、Edit、List、Info、Report）
以 Item 结尾的代表着组件（CarListItem、CarInfoItem）

vue 方法命名

vue 方法放置顺序

components
props
data
created
mounted
activited
update
beforeRouteUpdate
metods
filter
computed
watch

method 自定义方法命名

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

data props 方法注意点

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

生命周期方法注意点

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

码农公寓