vue使用的什么规范 • Worktile社区

worktile

Worktile官方账号

Vue.js 使用的是“Vue风格指南”，它是由 Vue.js 官方团队制定的一组规范和建议，旨在帮助开发人员更好地编写 Vue 代码，增强代码可读性和可维护性。

Vue 风格指南包括以下几个方面的规范：

组件名称：组件名称应该使用 PascalCase（大驼峰命名法），并避免使用保留字。
单文件组件的书写顺序：单文件组件（.vue 文件）应该按以下顺序组织：模板、脚本、样式（template、script、style）。
组件选项的顺序：组件选项应该按以下顺序排列：props、data、computed、watch、methods、生命周期钩子等。
模板中属性的顺序：模板中的属性应该按以下顺序排列：指令（v-for、v-if 等）、关键字（key、ref 等）、普通属性等。
缩进：使用两个空格代替制表符进行缩进。
代码风格：建议使用 ES6+ 的语法，例如箭头函数、解构赋值等。
组件通信：父子组件之间的通信应该使用 props 和事件，而不是直接修改父组件的状态。

除了以上几点，Vue 风格指南还包括了很多其他规范和约定，例如命名规范、事件处理、样式规范等。

遵循 Vue 风格指南可以使团队开发的代码风格保持一致，更易读、易维护，并且减少潜在的 bug。所以，当我们使用 Vue.js 进行开发时，建议参考 Vue 风格指南的规范和建议来编写代码。

1年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

Vue 使用的是 JavaScript 的一些常见编码规范，其中包括以下几个方面：

JavaScript 代码规范：Vue 项目中的 JavaScript 代码遵循 Airbnb JavaScript Style Guide，该规范强调代码的可读性和一致性，并提供了一系列的规则和约定，比如缩进、命名规范、函数写法等。
HTML 模板规范：Vue 的模板使用的是 HTML ，在编写模板时，应当遵循 W3C 的 HTML 规范，包括正确嵌套标签、使用合适的语义化标签等。
CSS 规范：Vue 的组件可以使用 CSS 来进行样式的定义，对于 CSS 的编写也有一些规范要求。比如使用 BEM（块、元素、修饰符）命名规范对类名进行命名，避免使用全局样式等。
组件命名规范：Vue 的组件是应用程序的核心，在定义组件时需要遵循一定的组件命名规范。通常情况下，组件的名称是单词大写开头的驼峰命名法，并且尽量使用具有描述性的名字，以便于代码的理解和维护。
项目结构规范：Vue 的项目结构通常是由多个组件组成的，为了保持项目的清晰和可维护性，需要遵循一定的项目结构规范。通常情况下，可以将组件按照功能或领域划分成不同的文件夹，并使用统一的目录结构，比如将组件放在 "components" 文件夹下，将页面放在 "views" 文件夹下等。

总结来说，Vue 使用了 JavaScript 的编码规范，包括 JavaScript 代码、HTML 模板、CSS 样式、组件命名和项目结构等规范。这些规范的遵循可以提高代码的可读性、一致性和可维护性，使项目开发更加高效和顺利。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

Vue.js 使用的是一套开发规范，包括代码风格规范、组件命名规范、目录结构规范等。这些规范旨在提高代码的可阅读性、可维护性，并促进开发团队之间的协作。下面将从不同方面介绍 Vue.js 的规范。

代码风格规范

Vue.js 推荐使用 ESLint 作为代码风格检查工具。ESLint 可以帮助开发者在编写代码的过程中发现潜在的问题，并提供自动修复功能。Vue.js 官方提供了 eslint-plugin-vue 插件，其中包含了针对 Vue.js 代码的一些额外规则。

以下是一些代码风格规范的示例：

使用两个空格缩进。

// Bad
if (true) {
∙∙∙∙console.log('Hello, World!');
}

// Good
if (true) {
∙∙console.log('Hello, World!');
}

每行代码的字符数不超过 80。

// Bad
const message = 'This is a very long message that exceeds the recommended line length of 80 characters.';

// Good
const message = 'This is a shorter message.';

使用单引号或反引号（backtick）包裹字符串。

// Bad
const message = "This is a message.";

// Good
const message = 'This is a message.';

更多代码风格规范可以参考 Vue.js 官方风格指南。

组件命名规范

在 Vue.js 中，组件是应用程序的基本构建块。一个好的命名规范可以提高组件的可读性和可维护性。

以下是一些组件命名规范的示例：

使用完整的单词来描述组件的功能。

// Bad
export default {
  name: 'Nav'
}

// Good
export default {
  name: 'Navigation'
}

使用连字符（hyphen）而不是驼峰式命名。

// Bad
export default {
  name: 'myComponent'
}

// Good
export default {
  name: 'my-component'
}

在命名组件文件时，使用大写驼峰式命名。

// File: MyComponent.vue

export default {
  // ...
}

目录结构规范

良好的目录结构可以使项目组织更加清晰，并且方便团队成员协作开发。

以下是一些目录结构规范的示例：

src/
  assets/        // 静态资源文件夹
  components/    // 组件文件夹
  views/         // 页面文件夹
  router/        // 路由文件夹
  store/         // 状态管理文件夹
  utils/         // 工具文件夹
  styles/        // 样式文件夹
  main.js        // 入口文件

在开发大型应用程序时，可以根据业务需求进一步细分目录结构。

总结

Vue.js 使用一套开发规范，包括代码风格规范、组件命名规范、目录结构规范等。这些规范有助于提高代码的可阅读性、可维护性，并促进团队协作。开发者可以根据 Vue.js 官方提供的规范指南进行实践，或根据团队的需求制定自己的规范。

1年前 0条评论