博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue开发规范
阅读量:5884 次
发布时间:2019-06-19

本文共 1953 字,大约阅读时间需要 6 分钟。

背景

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

技术栈

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

主要:

vue 2.5.0webapck 4.0.0element-uivuexaxios

本次项目使用脚手架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 中的属性声明要明确类型

    // incorrectexport default {  props: ['node', 'size']}// correctexport default {  props: {    node: Object, // 对象    size: [String, Number], // 两种类型都可以  }}
  • 为v-for设置键值key,避免 v-if 和 v-for 用在一起使用。
  • 每块代码快尽量加上注释

    /** *@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://eelix.baihongyu.com/

你可能感兴趣的文章
Linux Shell从入门到删除根目录跑路指南
查看>>
深入了解MyBatis参数
查看>>
FreeBSD中安装源的方法
查看>>
浮动层代码
查看>>
1.安装zabbix server
查看>>
mongodb相关(单实例、复制集、分片集)
查看>>
tcp实现聊天系统
查看>>
快速排序的总结
查看>>
聊聊eureka server的RemoteRegionRegistry
查看>>
Linux系统详细启动流程
查看>>
19.7 主动模式和被动模式 19.8 添加监控主机 19.9 添加自定义模板 19.10 处理图形...
查看>>
20.20 告警系统主脚本 20.21 告警系统配置文件 20.22 告警系统监控项目
查看>>
openstackM centos7 多节点安装 Packstack –answer-file方式
查看>>
Web前端面试指导(四):面试前准备-有备而去百战百胜
查看>>
C#.NET 大型通用信息化系统集成快速开发平台 4.0 版本 - 标准省市县数据的公司选择窗口实现...
查看>>
Tomcat学习(一)
查看>>
数学建模模板
查看>>
php include 语句包含文件时,浏览器多出换行
查看>>
配置yum 源
查看>>
运维打印机篇
查看>>