vue开发规范

背景

由于saas平台即将开始，现在重新梳理前端架构和开发规范，项目使用模块化思想搭建，每个模块都有自己都路由和方法，尽量做到删除和添加模块，不会对框架产生较大对影响。

技术栈

本次项目继续沿用vue框架和element-ui，以及其它一些插件。
主要：

vue 2.5.0
webapck 4.0.0
element-ui
vuex
axios

本次项目使用脚手架vue-cli 3.0 版本，webpack也基于4.0作为基础框架开发，配置变动比较大，但是相比3.0简洁明了了许多。

项目结构

├─ public 公共资源
├─ src
│  ├─ api 公共api
│  ├─ assets 资源
│  ├─ └─ styles 全局样式
│  ├─ components 公共组件
│  ├─ layout 布局
│  ├─ mock 模拟数据
│  ├─ modular 项目模块
│  │  ├─ home 
│  │  ├─└─ api 模块api
│  │  ├─└─ pages 模块页面
│  │  ├─└─ router 模块路由
│  ├─ plugin 插件
│  ├─ router 公共路由
│  ├─ store 全局状态
│  ├─ utils 公共方法
│  ├─ App.vue 主视图
│  ├─ main.js 主程
│  └─ setting.js 设置
├─ static 静态资源
├─ .browserslistrc
├─ .eslintrc.js
├─ .gitignore
├─ babel.config.js
├─ package.json
├─ README.md
└─ vue.config.js 配置文件
├─ yarn.lock

开发规范

1.语义化命名

• 使用驼峰式命名，文件命名不宜过长，路由的命名和文件命名保持一致。

2.文件目录规范

• 不宜嵌套过多层文件，且不同模块相同文件名应保持一致，区分大小写。

3.路由

• 用户管理下有增改两个功能，不使用弹框去做的前提下，假如说 add 和 update 对应两个路由是 /addUser，/updateUser。我们系统地址栏是这样显示的：

  // 增加用户
  localhost:3030/addUser
  // 修改用户
  localhost:3030/updateUser?id=1

  但是模块多的话，就不容易区分，其实应该这样做：

  // 增加用户
  localhost:3030/user/add
  // 修改用户
  localhost:3030/user/update?id=1

4.Vue 组件

• 关于 Vue 组件开发规范可以参考官方的风格指南
• 组件名以单词大写开头驼峰 (PascalCase)

5.细节

• 组件中的字体图标（icon）尽量不要用 png 图片
• 使用两个空格（space）进行缩进

• Props 中的属性声明要明确类型

  // incorrect
  export default {
    props: ['node', 'size']
  }
  
  // correct
  export default {
    props: {
      node: Object, // 对象
      size: [String, Number], // 两种类型都可以
    }
  }

• 为v-for设置键值key,避免 v-if 和 v-for 用在一起使用。

• 每块代码快尽量加上注释

  <!-- 正确的示范 -->
  <template>
    <div>
      <!-- Header -->
      <div class="header">...</div>
      
      <!-- User table -->
      <div>
        <el-table>...</el-table>
      </div>
      
      <!-- Add user dialog -->
      <div class="dialog">
        <el-dialog title="新增用户">...</el-dialog>
      </div>
    </div>
  </template>
  

  /**
   *@desc  改变状态
   *@param  id      [String]  改变对象的id
   *@param  status  [String]  改变对象的status
   *@return config  [Object]  配置对象
   */
  changeStatus(id, status) {
    let self = this
      return config = {
      url: api.changeBannerStatus,
      loading: "loading",
      param: {
        banner_position_id: id,
        status: status
      }
    };

参考和引用地址：
腾讯规范文档：http://alloyteam.github.io/Co...