xx前端开发规范

开发规范的目的

  1. 提高团队开发效率
  2. 有利于项目的后期维护
  3. 使开发更加标准化
  4. 使开发更加流程化

前端使用的技术栈

  • vue(2.0+)
  • vue-router
  • vueX
  • axios
  • es6
  • webpack(4.0+)
  • less
  • elementUI(按需加载的方式)
  • vue-cli(2.0+)
  • 运用vuecli2.0+搭建的项目(webpack 3.0+)

规范前首先要参考vue的风格指南
链接描述

es6参考阮一峰ES6
链接描述

项目结构(基于脚手架)



├── build// 项目构建(webpack)相关代码
│   ├── build.js// 生产环境构建代码
│   ├── check-versions.js// 检查node、npm等版本
│   ├── utils.js// 构建工具相关
│   ├── vue-loader.conf.js// webpack loader配置
│   ├── webpack.base.conf.js// webpack基础配置
│   ├── webpack.dev.conf.js// webpack开发环境配置,构建开发本地服务器
│   └── webpack.prod.conf.js// webpack生产环境配置
├── config// 项目开发环境配置
│   ├── dev.env.js// 开发环境变量
│   ├── index.js// 项目一些配置变量
│   └── prod.env.js/ 生产环境变量
├── dist//项目打包后的文件
├── node_modules//依赖
├── src// 源码目录
│   ├── assets//资源目录
│   │   │── img//图片目录
│   │   │── js//js目录
│   │   │── font//字体和字体图标目录
│   │   └── css//css目录
│   ├── less//less目录
│   │   │── reset.less//重置css样式
│   │   │── public.less//定义一些公关的颜色、字体大小等变量,方便以后统一改风格
│   │   └── commonElement.less//重置elementUI样式
│   ├── components//组件目录
│   │   │── public//公共组件
│   │   └── Module//单个页面,或者单独模块的组件
│   ├── page//页面目录
│   │   └── Module//单个页面
│   ├── request
│   │   └── api.js//ajax请求全局封装位置(统一用axios)
│   ├── config//配置页面
│   │   └── config.js//ajax请求路径以及环境的配置(统一管理)
│   ├── router//路由文件
│   │    └── index.js//路由管理
│   ├── store//vueX目录(如果使用vuex)
│   │   │── state.js//状态管理
│   │   │── mutation.js//更改 Vuex 的 store 中的状态的唯一方法
│   │   │── action.js//Action 提交的是 mutation,而不是直接变更状态(异步操作)
│   │   └── module//也可以根据页面或者组件分模块
│   ├── util//工具函数文件
│   │    └── util.js//工具函数
│   ├── APP.vue // 页面入口文件
│   └── main.js // 程序入口文件,加载各种公共组件
├── static// 静态文件
├── .babelrc// ES6语法编译配置       
├── .editorconfig// 定义代码格式  
├── .postcsssrc// postcss配置文件  
├── index.html// 入口页面 
├── package.json// 项目基本信息,包依赖信息等             
├── README.md// 项目说明

github模板地址:

https://github.com/suidagang/…

引入less

引入
npm install less less-loader --D
//引入注意(@前面加~)
@import "~@/less/variable.less";

基于组件化开发

  • 组件化开发的好处
   提高开发效率
   方便重复使用
   简化调试步骤
   提升整个项目的可维护性
   便于协同开发
   使其高内聚,低耦合,达到分治与复用的目的。
  • vue组件化开发规范
    单文件系统,样式局部作用域
    基本组成结构:<template/> <script/> <style scoped/>
  • 组件命名规范
 1、有意义的名词、简短、具有可读性
 2、以小写开头,采用驼峰式命名(camelCase)
 3、公共组件命名(publicXX.vue)
 4、文件夹命名主要以功能模块代表命名。  
  • vue文件基本结构
        <template>
          <div>
            <!--必须在div中编写页面-->
          </div>
        </template>
        <script>
          export default {
            components : {
            },
            data () {
              return {
              }
            },
            mounted() {
        
            }
            methods: {
                test () {
                    
                }
            },
         }
        </script>
        <!--声明语言,并且添加scoped-->
        <style lang="less" scoped>
        </style>
  • vue文件方法声明顺序(可按个人实际情况而定)
    - components   
    - props    
    - data     
    - created
    - mounted
    - activited
    - update
    - beforeRouteUpdate
    - metods   
    - filter
    - computed
    - watch
  • 组件引入规范
如果在build/webpack.base.config.js中设置
    resolve: {
        extensions: ['*', '.js', '.json', '.vue'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': path.resolve(__dirname, '../src'),
        }
    };
设置了@后,引用方式统一为:
import NowTime from "@/components/public/nowTime.vue"
<NowTime></NowTime>

代码注释规范

代码注释在一个项目的后期维护中显的尤为重要,所以我们要为每一个被复用的组件编写组件使用说明,为组件中每一个方法编写方法说明。以下情况,务必添加注释。
    1.公共组件使用说明
    2.各组件中重要函数或者类说明
    3.复杂的业务逻辑处理说明
    4.特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的hack、使用了某种算法或思路等需要进行注释描述
    5.注释块必须以/**(至少两个星号)开头**/
    6.单行注释使用//
  • 单行注释
普通方法一般使用单行注释// 来说明该方法主要作用
  • 多行注释
    组件使用说明,和调用说明 
   <!--公用组件:数据表格
      /**
      * 组件名称
      * @module 组件存放位置
      * @desc 组件描述
      * @author 组件作者
      * @date 2017年12月05日17:22:43
      * @param {Object} 

- 参数说明 * @param {String} [columns] - 参数说明 * @example 调用示例 * <hbTable :title="title" :columns="columns" :tableData="tableData"></hbTable> */ -->

编码规范

  • 使用ES6风格编码源码
     定义变量使用let ,定义常量使用const
     使用export ,import 模块化
  • 组件 props传值
Prop 验证
命名应该始终使用驼峰命名 (camelCase)
props: {
    // 多个可能的类型
    propB: {
        type:[String, Number],
        required:true
    },
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
}
  • 调试信息
console.log() debugger 使用完及时删除
  • 指令缩写
    指令缩写 
    用 : 表示 v-bind: 
    用 @ 表示 v-on: 
    用 # 表示 v-slot: 
  • Css要求
    1)vue以局部css来写<style lang="less" scoped></style>只作用于当前vue文件。
    
    2)公共使用的css要单独放在一个文件夹里(less.css)。

将 this 赋值给 component 变量 (统一使用es6)

在 Vue.js 组件上下文中,this指向了组件实例。因此当你切换到了不同的上下文时,要确保 this 指向一个可用的 component 变量。
换句话说,如果你正在使用 ES6 的话,就不要再编写 var self = this; 这样的代码了,您可以安全地使用 Vue 组件。

 - 使用 ES6,就不再需要将 this 保存到一个变量中了。
 - 一般来说,当你使用箭头函数时,会保留 this 的作用域。(箭头函数没有它自己的 this 值,箭头函数内的 this 值继承自外围作用域)
 - 如果你没有使用 ES6,当然也就不会使用 箭头函数 啦,那你必须将 “this” 保存到到某个变量中。这是唯一的例外。

强烈建议(方便以后代码整理风格)

  1. 推荐使用vs code进行前端编码,规定Tab大小为4个空格
  • vs code配置
{
    "path-intellisense.mappings": {
        "@": "${workspaceRoot}/src"
    },
    "svn.enableProposedApi": "product",
    "editor.fontFamily": "Comic Sans MS",
    "editor.fontSize": 22,
    "workbench.iconTheme": "vscode-icons",
    "vetur.format.defaultFormatter.html": "prettier",
    "git.ignoreMissingGitWarning": true,
    "files.autoSave": "onFocusChange",
    "vetur.validation.template": false,
    "git.path": "C:/software/git/Git/cmd/git.exe",
    "gitlens.advanced.messages": {
    "suppressShowKeyBindingsNotice": true,
    "suppressWelcomeNotice": true
    },
    "git.enableSmartCommit": true,
    "gitlens.keymap": "alternate",
    "terminal.integrated.fontSize": 14,
    "terminal.integrated.fontFamily": "Consolas, 'Courier New', monospace",
    "window.zoomLevel": -1,
    "[javascript]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "editor.accessibilitySupport": "off",
    "[html]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    }
}
  • vs code 插件
  1. Auto Close Tag
  2. Auto Rename Tag
  3. Beautify
  4. Chinese (Simplified) Language Pack for Visual Studio Code
  5. Live Server
  6. open in browser
  7. Path Intellisense
  8. SVN
  9. TortoiseSVN
  10. Vetur
  11. vscode-icons
  12. Vue 2 Snippets
  13. Vue Peek
  14. VueHelper
  15. wpy-beautify

基于脚手架vuecli 2.0 的优化

下一篇

    原文作者:suipa
    原文地址: https://segmentfault.com/a/1190000019803077
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞