Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[vue] 你有看过vue推荐的风格指南吗?列举出你知道的几条 #547

Open
haizhilin2013 opened this issue Jul 2, 2019 · 6 comments
Labels
vue vue

Comments

@haizhilin2013
Copy link
Collaborator

[vue] 你有看过vue推荐的风格指南吗?列举出你知道的几条

@haizhilin2013 haizhilin2013 added the vue vue label Jul 2, 2019
@xuech
Copy link

xuech commented Jul 4, 2019

1、组件名称见名知意,最好加特殊前缀,如:el-Button、el-row等
2、组件的prop尽可能描述的越详细越好
3、为组件样式设置scoped作用域
等等

@xuech
Copy link

xuech commented Jul 4, 2019

1、使用v-for时记得加key,可以快速定位到需要更新的DOM节点,提高效率。
2、永远不要把 v-if 和 v-for 同时用在同一个元素上。提高渲染效率
3、优先通过 Vuex 管理全局状态,而不是通过 this.$root 或一个全局事件总线

@encountermm
Copy link

encountermm commented Jul 15, 2019

image
官方风格指南:https://cn.vuejs.org/v2/style-guide/index.html

@censek
Copy link

censek commented Oct 9, 2019

🔗 https://cn.vuejs.org/v2/style-guide/

  1. 优先级A的规则:必要的 (规避错误)
  • 组件名为多个单词
  • 组件数据:组件的 data 必须是一个函数。
  • 细致的 Prop 定义
  • 总是用 :key 配合 v-for
  • 避免 v-ifv-for 用在一起
  • 为组件样式设置作用域
  • 私有属性名:自定义私有属性使用 $_ 前缀。并附带一个命名空间以回避和其它作者的冲突 (比如 $_yourPluginName_)。

  1. 优先级B的规则:强烈推荐 (增强可读性)
  • 组件文件:只要有能够拼接文件的构建系统,就把每个组件单独分成文件。
  • 单文件组件文件的大小写:要么始终是单词大写开头 (PascalCase),要么始终是横线连接 (kebab-case)。
  • 基础组件名:应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头,比如 BaseAppV
  • 单例组件名:只拥有单个活跃实例(每个页面只使用一次)的组件应该以 The 前缀命名,以示其唯一性。
  • 紧密耦合的组件名:和父组件紧密耦合的子组件应该以父组件名作为前缀命名。
  • 组件名中的单词顺序:组件名应该以高级别的 (通常是一般化描述的) 单词开头,以描述性的修饰词结尾。
  • 自闭合组件:在单文件组件、字符串模板和 JSX 中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做。
  • 模版中的组件名大小写:在单文件组件和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的。
  • JS / JSX 中的组件名大小写:JS/JSX 中的组件名应该始终是 PascalCase 的,在较为简单的应用中只使用 Vue.component 进行全局组件注册时,可以使用 kebab-case 字符串。
  • 完整单词的组件名
  • Prop 名大小写:在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板和 JSX 中应该始终使用 kebab-case。
  • 多个特性的元素:多个特性的元素应该分多行撰写,每个特性一行。
  • 模板中简单的表达式:组件模板应该只包含简单的表达式,复杂的表达式则应该重构为计算属性或方法。
  • 简单的计算属性
  • 带引号的特性值:非空 HTML 特性值应该始终带引号 (单引号或双引号,选你 JS 里不用的那个)。
  • 指令缩写:指令缩写 (用 : 表示 v-bind: 、用 @ 表示 v-on: 和用 # 表示 v-slot:) 应该要么都用要么都不用。

  1. 优先级C的规则:推荐 (将选择和认知成本最小化)
    https://cn.vuejs.org/v2/style-guide/#%E4%BC%98%E5%85%88%E7%BA%A7-C-%E7%9A%84%E8%A7%84%E5%88%99%EF%BC%9A%E6%8E%A8%E8%8D%90-%E5%B0%86%E9%80%89%E6%8B%A9%E5%92%8C%E8%AE%A4%E7%9F%A5%E6%88%90%E6%9C%AC%E6%9C%80%E5%B0%8F%E5%8C%96
  • 组件 / 实例的选项的顺序
  • 元素特性的顺序
  • 组件 / 实例选项中的空行:在多个属性之间增加一个空行,特别是在这些选项一屏放不下,需要滚动才能都看到的时候。
  • 单文件组件的顶级元素的顺序:总是让 <script><template><style> 标签的顺序保持一致。且 <style> 要放在最后,因为另外两个标签至少要有一个。

  1. 优先级D的规则:谨慎使用 (有潜在危险的模式)
  • 没有在 v-if / v-else-if / v-else 中使用 key
  • 元素选择器应该避免在 scoped 中出现。
  • 隐性的父子组件通信:应该优先通过 prop 和事件进行父子组件之间的通信,而不是 this.$parent 或改变 prop。
  • 非 Flux 的全局状态管理:应该优先通过 Vuex 管理全局状态,而不是通过 this.$root 或一个全局事件总线。

@crush2020
Copy link

在路由中导入的组件小写,在页面中导入的组件以驼峰命名

@dzhou-CHINA
Copy link

在路由中导入的组件小写,在页面中导入的组件以驼峰命名

Why?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
vue vue
Projects
None yet
Development

No branches or pull requests

6 participants