type
status
date
slug
summary
tags
category
icon
password
目录结构规范
保持一致的目录结构能够提高团队协作效率，便于管理和理解。参考 Vue标准项目。
简要说明
main.js：主入口文件。
router.js：路由划分。
plugins：自定义或第三方插件，包括组件、指令、过滤器等。
pages：所有路由页面。原则：轻页面，重组件。
components：所有组件，包括原子组件、业务公用组件和页面独有组件。
server：API 引入入口。
assets：存放 Sass、图片等资源，数据不常修改。
utils：工具函数文件夹。
store：标准 Vuex 格式，非必需。
详细说明
一、实例选项顺序
在 Vue 的
export default 对象中，API Key 的顺序保持一致有助于团队协作。推荐的顺序如下：- Vue 扩展：
extends,mixins,components
- Vue 数据：
props,model,data,computed,watch
- Vue 资源：
filters,directives
- Vue 生命周期：
created,mounted,destroy
- Vue 方法：
methods
推荐顺序示例
二、组件设计风格
1. Element 元素命名
统一使用
El 后缀。2. Vue 实例命名
统一使用
VM 后缀。3. 被动事件命名
使用
on 前缀。4. Slot 使用
只在对应名称的 class 内设置。
5. 变量命名
- 常见状态：
default,primary,info,success,warning,error,disabled,muted。
- 大小分级：
mini,small,base,large,huge。
- 颜色分级：
darkest,darker,dark,base,light,lighter,lightest。
三、Vue-Router 编写习惯
使用路由懒加载，结合 Vue 异步组件和 Webpack 代码分割。
优点
- 减小包体积，提高加载速度。
- 组件定义清晰，便于管理。
示例
文件命名
统一使用小写，多个单词用
- 分隔。四、其他命名和格式规范
1. 紧密耦合的组件命名
子组件以父组件名作为前缀命名。
2. 自闭合组件
没有内容的组件应自闭合。
3. 指令缩写
使用
: 表示 v-bind，用 @ 表示 v-on。4. 组件数据
组件的
data 必须是一个函数，建议不使用箭头函数。5. Props 命名
使用小驼峰命名，内容尽量详细，至少有默认值。
6. 组件属性顺序和分行规则
顺序：指令 -> props 属性 -> 事件 -> DOM 属性。重要内容较多时可分行。
7. Vue API 顺序
保持一致的 API 顺序。
8. Vue 组件顶级标签顺序
保持一致，标签间留空行。
<template> 第一层级下四个空格，<script> 和 <style> 第一层级不加空格。9. Import 引入顺序
同等类型的放在一起，优先放 mixins 和 components 等 UI 资源。
10. Vue 复杂 data 加注释/分组
当
data 过于复杂时，建议进行注释和分组。参考链接
- 作者:HRope
- 链接:https://hrope.cn/article/vue-guide
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。