Vue 代码规范 script代码是写给人看的, 顺便给机器运行 ! 坚持制定好的代码规范，无论团队人数多少，代码应该同

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

代码是写给人看的, 顺便给机器运行 !

前言

本人所在公司时由于项目组中前端人员较少，一直以来没有一个规范来对代码进行统一，导致项目代码量增大之后，变的极难维护，鉴于之前项目的经验和自己开发中的一些习惯，总结出下面的一些代码规范，还不太完整，以后会及时补充。可能我的规范不适合用于大家，但是希望大家阅读后能去其糟泊取其精华，形成自己良好的代码风格。（希望给我点赞的朋友们，都不要遇到需要维护的shishan一样的代码）没点赞的也一样。

本文先从 vue 中的script 部分开始，后面还会有template 部分和 style部分。

正文

导入必须使用从@ 开始的路径，若vue.config.js中有定义须优先使用，不使用相对路径

// 在 vue.config.js 中配置别名
chainWebpack: (config) => {
  // 添加别名
  config.resolve.alias
    .set('@', resolve('src'))
    .set('@a', resolve('src/assets'))
    .set('@c', resolve('src/components'))
    .set('@h', resolve('src/https'))
    .set('@p', resolve('src/plugins'))
    .set('@l', resolve('src/layout'))
    .set('@r', resolve('src/router'))
    .set('@s', resolve('src/store'))
    .set('@sty', resolve('src/styles'))
    .set('@u', resolve('src/utils'))
    .set('@ven', resolve('src/vendor'))
    .set('@v', resolve('src/views'))
  config.optimization.runtimeChunk('single')
},
// 在引入组件时应该使用别名，不使用相对路径    
import MHeader from '@l/header'
import SideBar from '@l/sideBar'

export default对象中的属性需要按照以下顺序书写，不需要的可不写（name除外）

name, component, props, data, methods, computed, watch, mounted

<script>
export default {
  name: '',
  components: {

  },
  props: {

  },
  data () {

  },
  methods: {
    init () {
      
    }
  },
  computed: {

  },
  watch: {

  },
  mounted () {
    this.init()
  }
}
</script>

name 一般与单文件组件相同使用帕卡拼写法/大骆驼拼写法PascaCase 拼写法
```
name: 'BaseEcharts',
```
components中一个组件独占一行
```
components: {
  MHeader,
  SideBar
},
```

props 必须有严格的类型约束

props: {
  id: { type: String, required: true },
  width: { type: String, default: '500px' },
  height: { type: String, default: '500px' },
  opt: { type: Object, required: true }
},

props 在声明时应该使用 cameCase，在模板中应该使用短横线 kebab-case
```
props: {
  greetingText: String
}
<WelcomeMessage greeting-text="hi"/>
```

data 数据必须是一个函数

data () {
  return {
    mergeListLegacy: [],
    fieldListLegacy: [],
    tableDataLegacy: []
  }
},

使用 mounted，不使用 created，methods 对象中 init函数作为最后一个
```
mounted () {
  this.init()
}
```
使用 let/const，不使用 var
```
const fieldname = column.property
```

使用单引号，不使用双引号

if (typeof row[fieldname + 'rowspan'] === 'undefined') {
  return { rowspan: 1, colspan: 1 }
}

箭头函数单个参数时不使用括号，其他则使用

// 单个参数
this.tableData.map(item => {
	// ...        
})

// 多个参数
this.tableData.map((item, index) => {
	// ...        
})

句尾不写分号

init () {
  this.mergeListLegacy = data.tableData.mergeList
  this.fieldListLegacy = data.tableData.fieldList
  this.tableDataLegacy = this.parseTable(data.tableData.list)
}

函数中调用接口使用 async await 方式，并使用对象解构获取后端返回数据
```
async uploadFile(fData) {
  const { code, message } = await uploadFile(fData)
}
```

接口请求先判断唯一标识后获取数据

if (code === 200) {
  this.mapData = data
  this.mapData.value = this.OPTIONS[0].value
}

以下几种情况需要空格：
- 对象中 key值后面的 : 后须有空格
- 函数名称后面的 () 前后须有空格
- 三元表达式中的 ? : 前后须有空格
- 所有二元操作符（= ，=== ，||， &&， ||， ||等）前后须有空格
- 大括号不换行时，大括号开始 { 后和结束前 } 须有空格
- 当多个变量/参数处于一行时，变量后面的逗号 , 后要有空格
```
data () {
  return {
    mergeListLegacy: [],
    fieldListLegacy: [],
    tableDataLegacy: []
  }
}

const { code, message, data } = await getSelfServiceWorkbench(this.form)

console.log(num, value)

para.pageSize = isDownload ? 0 : this.pagination.pageSize 
```
能使用 ES6 中的 `` 代替拼接字符串，中间变量使用 ${xxx}

${xxx}：xxx 可以是变量，也可以时三目运算
```
Toast.fail(`${this.label}或处理意见不能为空`)
```
清除无用的console

参考:

Vue 官网风格指南