前端开发规范——Vue

Vue 规范

1. 项目结构

1.1 项目目录结构

★ [强制] 参照vue标准文件目录

示例：

node_nodules/
public/
src/
|- api  ---------------------- 统一接口目录
|- assets  ------------------- 资源目录
|- components  --------------- 公共组件目录
|- directives  --------------- 自定义指令目录
|- router  ------------------- VueRouter目录
|- store  -------------------- Vuex目录
|- styles  ------------------- 样式文件目录
|- utils  -------------------- 工具目录
|- views  -------------------- 页面组件目录
|- App.vue
|- main.js
.browserslistrc
.env.development
.env.production
.eslintrc.js
.gitinore
babel.config.js
package.json
README.md
vue.config.js

1.2 拆分组件的原则

● [建议] 符合可复用、可组合、单一职责的原则。

● [建议] 相似功能合理拆分, 不在同一文件写过多冗余代码。

1.3 命名

★ [强制] 有意义的名词，简短、具有可读性。

★ [强制] 单文件组件的文件名采用大驼峰 (PascalCase)。index.vue为了简化引入可采用小写字母格式。

示例：

// good
components/
|- SearchButton.vue

// bad
components/
|- searchButton.vue
|- searchbutton.vue

● [建议] 与父组件紧密耦合的子组件应该以父组件名作为前缀命名。

示例：

// good
components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue

// bad
components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue

● [建议] 组件名称应该以高阶的 (通常是一般化描述的) 单词开头，并以描述性的修饰词结尾。

::: details 详解
对于一个带搜索表单的应用来说，它可能包含这样的组件：

components/
|- ClearSearchButton