基本規(guī)范
縮進：統(tǒng)一兩個空格縮進，不要使用 Tab 或者 Tab、空格混搭

HTML規(guī)范
html屬性使用雙引號（""），比如：

小明

嵌套時使用單引號（’’），比如：

小明

如果需要展示雙引號，可以使用轉(zhuǎn)義()，比如：<p title=“姓名是"小明”">
屬性命名使用短橫線命名（html屬性不區(qū)分大小寫，不要使用駝峰式命名），比如：

屬性順序
HTML 屬性應(yīng)該按照特定的順序出現(xiàn)以保證易讀性
id
class
name
data-xxx
src, for, type, href
title, alt
aria-xxx, role
布爾型屬性
HTML5 規(guī)范中 disabled、checked、selected 等屬性不用設(shè)置值

JS規(guī)范
變量定義：使用const定義常量，let定義局部變量，盡量不用var
使用 Camel 命名法
行位不需要加分號（;）
js字符變量賦值單引號（’’），如果遇到嵌套則外層單引號，內(nèi)層雙引號，如const x = ‘這是"測試"數(shù)據(jù)’
如果需要展示單引號，可以使用轉(zhuǎn)義（\），比如：const showName = ‘姓名是’小明’’
常量使用全部字母大寫，單詞間下劃線分隔的命名方式
如果變量是一個布爾值，變量名最好加上 is、has 或 can 作為前綴
取任何屬性之前應(yīng)判斷對象是否為空，比如const name = user && user.info && user.info.name
取數(shù)組值前應(yīng)先判斷非空以及數(shù)組長度，比如：const name = names && names.length > 1 ? names[1] : null
數(shù)組遍歷
arr.forEach
arr.map
arr.filter（過濾）
arr.every（與）
arr.some（或）
JSON遍歷
for … in

樣式規(guī)范
使用scss，適應(yīng)換膚和調(diào)整字體大小
換膚（暫不考慮換膚，但樣式規(guī)則需要遵循）
ElementUI使用以下變量定義顏色
$–color-primary：主題色（“409EFF”, “64,158,255”）
$–color-primary-light-1：（53a8ff）
$–color-primary-light-2：（66b1ff）
$–color-primary-light-3：（79bbff）
$–color-primary-light-4：（8cc5ff）
$–color-primary-light-5：（a0cfff）
$–color-primary-light-6：（b3d8ff）
$–color-primary-light-7：（c6e2ff）
$–color-primary-light-8：（d9ecff）
$??color?primary?light?9：（ecf5ff）mix($–color-black, $–color-primary, $–button-active-shade-percent)：（3a8ee6）

具體定義：
字體顏色：$??color?text?primary邊線顏色：$–border-color-base
超鏈接顏色：$??link?color超鏈接hover：$–link-hover-color

示例：
&:hover, &:focus {
color: $–color-primary;
border-color: $–color-primary-light-7;
background-color: KaTeX parse error: Expected 'EOF', got '}' at position 26: …imary-light-9; }? &:active { col…–color-black, $–color-primary, $??button?active?shade?percent);border?color:mix($–color-black, $–color-primary, $–button-active-shade-percent);
}

遵循BEM規(guī)范（http://www.cnblogs.com/ChengWuyi/p/5667945.html）
特定樣式不需要加瀏覽器前綴
所有顏色定義，均應(yīng)從variables.scss里面獲取

組件規(guī)范
命名：定義組件文件夾，文件夾名稱為有意義的，比如Table，文件夾下定義index.vue，可根據(jù)需要放置其他文件
組件格式：需定義name，格式為BvXxx，比如BvTable
私有變量、方法命名規(guī)則為：

__xx__

頁面引用：
引入組件（<script>），比如：

import BvExample from '@/components/Example'

注冊組件（<script>），比如：

components: { BvExample }

使用組件（<template>），比如：

<bv-example />

組件注冊
常用組件在plugins下面全局注冊
不常用組件，在調(diào)用的vue文件中通過components進行局部注冊
樣式
組件的樣式定義在components.scss
彈窗
彈窗組件需要設(shè)定按esc鍵和點擊遮罩不關(guān)閉

總結(jié)

以上是生活随笔為你收集整理的前端开发规范及自定义组件规范的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。