# qs-zone-vite

**Repository Path**: zclzone/qs-zone-vite

## Basic Information

- **Project Name**: qs-zone-vite
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-06-14
- **Last Updated**: 2021-11-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 本项目代码风格指南

### 1. 命名风格

> 文件夹如果是由多个单词组成，应该始终是横线连接 (kebab-case)。

防止有些文件系统对大小写不敏感出现问题。


> 组件名应该始终由多个单词组成，除了根组件 App，以及 <transition>、<component> 之类的 Vue 内置组件。

这样做可以避免与现有以及未来的 HTML 元素产生冲突，因为所有的 HTML 元素名称都是单个单词的。

> 单文件组件的文件名始终是横线连接 (kebab-case)。
```
my-component.vue
```

> 和父组件紧密耦合的子组件应该以父组件名作为前缀命名。
```
components/
|- todo-list.vue
|- todo-list-item.vue
└─ todo-list-item-button.vue
```

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

> 组件名称应该以高阶的 (通常是一般化描述的) 单词开头，并以描述性的修饰词结尾。
```
components/
|- search-button-clear.vue
|- search-button-run.vue
|- search-input-query.vue
|- search-input-exclude-glob.vue
|- settings-checkbox-terms.vue
|- settings-checkbox-launch-on-startup.vue
```


### 2. 代码风格
> 在单文件组件中没有内容的组件应该是自闭合的。
```html
<my-component />
```

> 始终以 key 配合 v-for。

> 永远不要在一个元素上同时使用 v-if 和 v-for。

> 在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。
```js
props: {
  greetingText: String
}

<my-component greeting-text="hi" />
```
> prop 的定义应该尽量详细，至少指定其类型。

> 组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。

> 应该把复杂计算属性尽可能多地分割为更简单的计算属性。


> 模板中使用双引号，js中使用单引号
```html
<div class="wrapper"></div>
```
```js
let str = 'hello!'
```


> 元素 (包括组件) 的 attribute 应该有统一的顺序。  
- 定义：is
- 列表渲染：v-for
- 条件：v-if、v-else-if、v-else、v-show、v-cloak
- ref、key
- v-model
- 其他 Attribute
- v-on：@
- 内容：v-html、v-text

```html
<my-component
  is
  v-for="item in list"
  v-if="true"
  v-show="false"
  v-cloak="false"
  ref="myCom"
  :key="item.id"
  v-model="value"
  style
  class
  @click="handleItemClick"
  v-html="vHtml"
  v-text="text"
/>
<!-- 注意，有些属性是不允许同时出现的，此处只是为了更方便展示 -->
```

> 组件选项应该有统一的顺序。  
- name
- components
- provide/inject
- inheritAttrs、 props、 emits、 expose
- setup
- data
- computed
- watch
- 生命周期事件：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、activated、deactivated、beforeUnmount、unmounted、errorCaptured、renderTracked、renderTriggered
- methods
- template/render


[参考链接：Vue3风格指南](https://v3.cn.vuejs.org/style-guide)  
[参考链接：Vant V3风格指南](https://vant-contrib.gitee.io/vant/v3/#/zh-CN/style-guide)