前端 vue 开发规范笔记
普通变量
常量
官方文档推荐及使用遵循规则:
//bad
go、nextPage、show、open、login
// good
jumpPage、openCarInfoDialog
//bad
takeData、confirmData、getList、postForm
// good
getListData、postFormData
<!-- bad -->
<script>
props: {
'greeting-text': String
}
</script>
<welcome-message greetingText="hi"></welcome-message>
<!-- good -->
<script>
props: {
greetingText: String
}
</script>
<welcome-message greeting-text="hi"></welcome-message>
src 源码目录
|-- api 接口,统一管理
|-- assets 静态资源,统一管理
|-- components 公用组件,全局文件
|-- filters 过滤器,全局工具
|-- icons 图标,全局资源
|-- datas 模拟数据,临时存放
|-- lib 外部引用的插件存放及修改文件
|-- mock 模拟接口,临时存放
|-- router 路由,统一管理
|-- store vuex, 统一管理
|-- views 视图目录
| |-- staffWorkbench 视图模块名
| |-- |-- staffWorkbench.vue 模块入口页面
| |-- |-- indexComponents 模块页面级组件文件夹
| |-- |-- components 模块通用组件文件夹
<template>
<div>
<!--必须在div中编写页面-->
</div>
</template>
<script>
export default {
components : {
},
data () {
return {
}
},
mounted() {
},
methods: {
}
}
</script>
<!--声明语言,并且添加scoped-->
<style lang="scss" scoped>
</style>
分多行撰写,每个特性一行
<!-- bad -->
<img src="https://vuejs.org/images/logo.png" alt="Vue Logo">
<my-component foo="a" bar="b" baz="c"></my-component>
<!-- good -->
<img
src="https://vuejs.org/images/logo.png"
alt="Vue Logo"
>
<my-component
foo="a"
bar="b"
baz="c"
>
</my-component>
原生在前,指令在后
- class
- id,ref
- name
- data-*
- src, for, type, href,value,max-length,max,min,pattern
- title, alt,placeholder
- aria-*, role
- required,readonly,disabled
- is
- v-for
- key
- v-if
- v-else-if
- v-else
- v-show
- v-cloak
- v-pre
- v-once
- v-model
- v-bind,:
- v-on,@
- v-html
- v-text
- components
- props
- data
- computed
- created
- mounted
- metods
- filter
- watch
不要在代码后的同一行内加注释
bad
var name =”abc”; // 姓名
good
// 姓名
var name = “abc”;
组件使用说明,和调用说明
/**
* 组件名称
* @module 组件存放位置
* @desc 组件描述
* @author 组件作者
* @date 2020年03月27日12:22:43
* @param {Object} [title] - 参数说明
* @param {String} [columns] - 参数说明
* @example 调用示例
* <hbTable :title="title" :columns="columns" :tableData="tableData"></hbTable>
**/
使用 ES6 风格编码
// bad
const a = 'foobar'
const b = 'foo' + a + 'bar'
// acceptable
const c = `foobar`
// good
const a = 'foobar'
const b = `foo${a}bar`
const c = 'foobar'
// 数组解构赋值 const arr = [1, 2, 3, 4] // bad const first = arr[0] const second = arr[1] // good const [first, second] = arr
// 对象解构赋值 // bad function getFullName(user) { const firstName = user.firstName const lastName = user.lastName } // good function getFullName(obj) { const { firstName, lastName } = obj } // best function getFullName({ firstName, lastName }) {}
const items = [1, 2, 3, 4, 5] // bad const itemsCopy = items // good const itemsCopy = [...items]
// bad const self = this; const boundMethod = function(...params) { return method.apply(self, params); } // acceptable const boundMethod = method.bind(this); // best const boundMethod = (...params) => method.apply(this, params);
// bad import * as myObject from './importModule' // good import myObject from './importModule'
function makeStyleGuide() { } export default makeStyleGuide;
const StyleGuide = { es6: { } }; export default StyleGuide;
有缩写一律采用缩写
// bad
v-bind:class="{'show-left':true}"
v-on:click="getListData"
// good
:class="{'show-left':true}"
@click="getListData"
v-for 循环必须加上 key 属性,在整个 for 循环中 key 需要唯一
<!-- good -->
<ul>
<li v-for="todo in todos" :key="todo.id">
{{ todo.text }}
</li>
</ul>
<!-- bad -->
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
避免 v-if 和 v-for 同时用在一个元素上(性能问题)
// bad 这样做只有开发原型系统时可以接受
props: ['status']
// good
props: {
status: {
type: String,
required: true,
validator: function (value) {
return [
'syncing',
'synced',
'version-conflict',
'error'
].indexOf(value) !== -1
}
}
}
// bad
if (true)
alert(name);
console.log(name);
// bad
if (true)
alert(name);
console.log(name)
// good
if (true) {
alert(name);
}
console.log(name);
通用
显示属性 | 自身属性 | 文本属性和其他修饰 |
---|---|---|
display | width | font |
visibility | height | text-align |
position | margin | text-decoration |
float | padding | vertical-align |
clear | border | white-space |
list-style | overflow | color |
top | min-width | background |
语义 | 命名 | 简写 |
---|---|---|
文档 | doc | doc |
头部 | head | hd |
主体 | body | bd |
尾部 | foot | ft |
主栏 | main | mn |
主栏子容器 | mainc | mnc |
侧栏 | side | sd |
侧栏子容器 | sidec | sdc |
盒容器 | wrap/box | wrap/box |
嵌套顺序
.product-teaser {
// 1. Style attributes
display: inline-block;
padding: 1rem;
background-color: whitesmoke;
color: grey;
// 2. Pseudo selectors with parent selector
&:hover {
color: black;
}
// 3. Pseudo elements with parent selector
&:before {
content: "";
display: block;
border-top: 1px solid grey;
}
&:after {
content: "";
display: block;
border-top: 1px solid grey;
}
// 4. State classes with parent selector
&.active {
background-color: pink;
color: red;
// 4.2. Pseuso selector in state class selector
&:hover {
color: darkred;
}
}
// 5. Contextual media queries
@media screen and (max-width: 640px) {
display: block;
font-size: 2em;
}
// 6. Sub selectors
> .content > .title {
font-size: 1.2em;
// 6.5. Contextual media queries in sub selector
@media screen and (max-width: 640px) {
letter-spacing: 0.2em;
text-transform: uppercase;
}
}
}
<style lang='scss'></style> // bad
<!-- 使用 scoped 作用域 -->
<style lang='scss' scoped></style> // good
<!-- 使用 BEM 约定 -->
<style> // good
.c-Button {
border: none;
border-radius: 2px;
}
.c-Button--close {
background-color: red;
}
</style>