vue怎么使用eval_基于 Vue 的前端开发规范

一、框架 / Vue

1.组件名

组件名为多个单词，并且用连接线(-)连接，避免与 HTML 标签冲突，并且结构更加清晰。

示例：// 反例export default {    name: 'item'}// 正例export default {    name: 'page-article-item'}

2.组件文件

组件的名字应该始终是以连接线(-)连接的单词，一方面可与组件名一致，使项目更加清晰，另一方面这样的写法对编辑器引入也很友好。

示例：// 反例├── index.html

├── main.js

└── components

├── pageheader

├── pagearticle

└── pageheader// 正例├── index.html

├── main.js

└── components

├── page-header

├── page-article

└── page-header

对于例如按钮、下拉框或表格这样的基础组件应该始终以一个特定的前缀开头，区别与其他业务组件。

示例：// 反例├── index.html

├── main.js

└── components

├── page-header

├── page-article

├── page-header

├── mazey-button

├── mazey-select

└── mazey-table// 正例├── index.html

├── main.js

└── components

|   ├── page-header

|   ├── page-article

|   └── page-header

└── base

├── mazey-button

├── mazey-select

└── mazey-table

3.Prop

定义 Prop 的时候应该始终以驼峰格式(camelCase)命名，在父组件赋值的时候使用连接线(-)。这里遵循每个语言的特性，因为在 HTML 标记中对大小写是不敏感的，使用连接线更加友好；而在 JavaScript 中更自然的是驼峰命名。

示例：// 反例// Vueprops: {

article-status: Boolean

}// HTML// 正例// Vueprops: {

articleStatus: Boolean

}// HTML

Prop 的定义应该尽量详细的指定其类型、默认值和验证。

示例：// 反例props: [