vue3前端代码规范提纲
时间: 2023-09-06 16:11:46 浏览: 60
以下是关于 Vue3 前端代码规范的提纲:
## 1. 文件和目录命名规范
- 文件和目录的命名应该简洁、有意义、易于理解,避免使用拼音或者无意义的英文单词。
- 目录名使用小写字母,单词之间使用短横线(-)连接。
- 文件名使用小写字母,单词之间使用短横线(-)连接,文件类型使用小写字母。
## 2. 代码风格规范
- 使用 2 个空格缩进
- 单行代码长度不超过 100 个字符,超过需要换行
- 使用驼峰命名法作为变量和函数的命名规范
- 每个 Vue 组件应该包含 template、script 和 style 三个部分,且每个部分之间需要有一个空行
- HTML 标签和属性名使用小写,属性值使用双引号
- JavaScript 中的常量全部使用大写字母,单词之间使用下划线连接
## 3. Vue3 组件规范
- 组件名应该使用 PascalCase 命名规范,即首字母大写
- 每个组件应该只做一件事情,保持单一职责原则
- 组件的 data 必须是一个函数,返回一个对象
- 在组件中使用 props 时,应该定义每个 prop 的类型和默认值
- 在组件中使用 v-slot 时,应该使用具有描述性的名称
## 4. Vue3 路由规范
- 路由的命名应该使用 kebab-case 命名规范,即单词之间使用短横线连接
- 路由的路径应该使用小写字母,单词之间使用短横线连接
- 路由的组件应该使用懒加载方式加载,以提高网站性能
- 在路由中使用 props 时,应该定义每个 prop 的类型和默认值
## 5. Vue3 Vuex 规范
- 所有的状态应该集中存储在 Vuex store 中
- 在 mutations 中修改状态,避免直接修改状态
- 在 actions 中进行异步操作,避免在组件中进行异步操作
- 在 getters 中对状态进行处理,提供给组件使用
以上是关于 Vue3 前端代码规范的提纲,具体实现细节根据实际情况进行补充。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)