form-web

form_web包开发注意事项：

本规范目标：代码风格统一，提升可维护性，可拓展，可控性；

代码风格

Vscode 相关配置

• 1. 统一使用Vscode作为开发编辑器，基础配置如下

    //开启保存的时候自动格式化
    "editor.formatOnSave": true,
    // 编辑粘贴自动格式化
    "editor.formatOnPaste": true,
    // 每行回车时格式化
    "editor.formatOnType": true,
    "editor.lineHeight": 18,
    "editor.fontSize": 16,
    "editor.fontFamily": "Consolas, 'Courier New', monospace",
    "editor.detectIndentation": true,
    "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
    "editor.renderWhitespace": "none",
    "editor.trimAutoWhitespace": true,
    "editor.lineNumbers": "on",
    "editor.wordWrap": "wordWrapColumn",
    "editor.wordWrapColumn": 145,
    "editor.autoClosingBrackets": "always",
    "html.format.preserveNewLines": false,

• 1. 代码统一使用2个空格缩进，配置如下

    "editor.tabSize": 2,
    "editor.insertSpaces": true,

• 1. 统一使用Vetur插件格式化vue代码，Vetur配置如下：（注意Vetur版本要新的）

    "vetur.completion.autoImport": false,
    "vetur.format.defaultFormatterOptions": {
      "prettier": {
          //属性行的长度 格式化代码 超过会自动换行
          "printWidth": 120
      }
    }

• 1. 其他配置

    // 如果编辑器卡配置下面这个为false
    "search.followSymlinks": false,
    // 自动提示 视乎电脑配置高低，配置高的可以开启，配置低的会卡
    "editor.quickSuggestions": true,
    // 保存时如果速度较慢，则配置此项-格式化超时时间 单位秒
    "editor.formatOnSaveTimeout": 300,

JS书写规范

1. 变量和方法名采用驼峰命名法
2. 变量和方法名至少由两个单词组成
3. 禁止对内置原生方法进行扩展，如Number.xxx = fn或Number.prototype.xxx = fn
4. 切勿滥用全局对象，如确实需要创建全局对象需统一在入口文件内显式的挂载到window下

Vue单文件组件格式

1. 为了保持统一的编码格式，vue单文件组件的写法按如下规则

<template>...</template>
                              <-注意，template和script之间空一行
<script>
  import XXX from 'xxxxx'
                              <-注意，import和export之间需要空一行
  export default {            <-注意，此处配置顺序按如下顺序，如某项没有则可不写
    name: '',                 
    components: {},
    props: {},
    data () {
      return {}
    },
    computed: {},
    beforeCreate (){},
    created (){},
    beforeMount (){},
    mounted (){},
    beforeUpdate (){},
    updated (){},
    beforeDestroy (){},
    destroyed (){},
    methods: {},
    watch: {},
  }
</script>
                            <-注意，script和style之间空一行
<style lang="less" scoped>  <-注意，style必须加scoped
  ...
</style>

如果有组件内的路由的钩子，则放在watch后面，依然按照beforeXX,XXed顺序放置。

1. 单文件组件代码不能超过300行。
2. 路由组件的 name 是必需的，和路由配置的name对应。
3. template 模板内不能做复杂的计算
4. 不能使用jQuery等直接操作Dom

其他规则

1、组件放置规则：

• 1）业务无关的公共组件，放置于src\components
• 2）业务关联性强的组件，放置于自身目录中的components

2、样式：公共样式应注意命名空间

• 1）表单样式统一置于src\components\globalStyles -> singlePage-wrapper内
• 2）组件样式需置于scoped下