Vue 开发规范目录及说明

本文详细介绍了前端Vue开发的规范,包括目录构建、命名、样式、字体和SVN提交管理。目录规范遵循组件化和页面独立原则,命名规范使用小驼峰、全大写和大驼峰方式,样式规范强调类选择器和防止污染,字体优先使用UI框架和阿里图标库,SVN提交管理要求有注释并忽略特定文件夹。
摘要由CSDN通过智能技术生成

前端 vue 开发规范:
1、目录构建规范
2、命名规范
3、样式规范
4、字体规范
5、SVN仓库提交管理

一、目录构建规范

当前采用的Vue的基本目录规范
在这里插入图片描述

  • 公共组件都放到components文件夹下,
  • page文件夹下,每个路由对应一个文件夹,用来放只在该页面使用的vue文件
  • 全局公共css样式,写入static/css/common.css中,在main.js中引入即可
二、命名规范
1、普通变量命名规范
  • 命名方法 :小驼峰命名法
  • 命名规范 :名字需语义化
2、常量
  • 命名方法 : 全部大写
  • 命名规范 : 使用大写字母和下划线来组合命名,下划线用以分割单词。
const MAX_COUNT = 10
const URL = 'https://www.baidu.com/'
3、组件命名规范
  • 命名方法 : 大驼峰式命名
  • 命名规范 : 组件名以单词大写开头,当多个单词拼写时,每个单词开关字母大写
三、样式规范
  • 样式命名规范:多个单词统一采用 “_” 相连接,以防止和第三方库中的命名冲突。
  • 单个组件样式一般可直接写到组件下style标签下,为了防止样式污染,可添加scoped 属性。
  • 写样式的时候尽量少写标签选择器,为了提高代码查找速度,可以用类选择器。
  • 写全局样式时,在其前面添加唯一的父类/祖先选择器,以限制样式的范围,防污染全局。
  • 属性顺序
    位置属性 ( position top right z-index display float)
    大小 ( width height padding margin)
    文字系列 ( font line-height letter-spacing color text-align)
    背景 ( background border)
    其他 ( animation transition)
    在这里插入图片描述
四、字体规范
  • 优先采用第三方UI框架中的图标;
  • 如果没有,再使用阿里图标库中的图标;
五、SVN仓库提交管理
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值