1. 基础规范
- 组件名采用单词连写： 组件名应该是多个单词的组合，且每个单词首字母大写。例如，MyComponent 而不是 my-component。
- 组件文件名： 单文件组件的文件名应该始终使用 PascalCase（大驼峰命名法），例如 MyComponent.vue。
- Prop 定义： 在声明 prop 的时候，应该尽量详细地指定类型，使用对象语法而非字符串数组。
2. 组件选项顺序
组件的选项应该按照一定的顺序排列，以提高代码的可读性。通常的顺序是：
- name
- delimiters
- functional
- model
- props, propsData
- data
- computed
- watch
- methods
- LIFECYCLE_HOOKS（生命周期钩子）
3. 指令缩写
Vue 提供了一些常用指令的缩写形式，例如 v-bind 可以用 : 代替，v-on 可以用 @ 代替。在使用时应该根据场景选择合适的缩写形式。
<!-- 不推荐 -->
<div v-bind:class="{ active: isActive }"></div>
<div v-on:click="doSomething"></div>
<!-- 推荐 -->
<div :class="{ active: isActive }"></div>
<div @click="doSomething"></div>
4. 组件中的空格
在组件的模板中，应该遵循一些简单的空格约定，以提高可读性。
<!-- 不推荐 -->
<MyComponent></MyComponent>
<!-- 推荐 -->
<MyComponent />
5. 指南和规则
Vue.js 的风格指南还包括一系列有关数据处理、组件通信、状态管理等方面的详细规范和建议。这些规范旨在帮助开发者写出一致、清晰、易于维护的代码。
你可以通过 [Vue.js 3.0 风格指南](https://v3.vuejs.org/style-guide/) 查看完整的内容，其中包含了更多的具体规范和例子。遵循这些规范有助于保持代码库的一致性，提高团队协作效率，以及更好地利用 Vue.js 的特性。
转载请注明出处：http://www.zyzy.cn/article/detail/582/Vue 3.0