Vue相關項目需要強制使用ESlint做代碼規范檢查，在使用vue-cli創建項目時，選擇standard規范，并且開啟fix修復功能。

chainWebpack: (config) => {
    config.module.rule('eslint').use('eslint-loader')
        .loader('eslint-loader')
        .tap(options => {
            options.fix = true
            return options;
        })
}

項目開發

前端項目一般會使用git版本控制系統，前后端分離的項目，前端代碼會跟服務端代碼分開存放。提交測試服或發布正式服的時候，前端將代碼編譯打包后，默認生成dist文件夾，只將此文件夾上傳至后端。

由于網段限制，前端的工程中一般會附帶node_modules.7z的依賴壓縮包，直接解壓出來使用，不需要再通過npm下載，更新依賴后，也需要同步更新node_modules.7z并提交。

所以如果在某些場景下不方便安裝node-sass的話，可以使用dart-sass替代。

項目開發前需要向需求方確認好瀏覽器版本的兼容情況，移動端需要支持到Android和iOS什么版本，是否使用的是軟件自帶的瀏覽器，內置瀏覽器版本是多少。

前端開發在寫代碼或者使用高級css功能的時候多去MDN上面查一查兼容性的問題，不能想當然地覺得這個代碼特性沒有兼容性問題。

項目文檔

前端項目的說明，需要寫道readme.md里面去，包括需要裝說明軟件環境，執行什么命令，配置什么host，如何打包發布。要達到的目的是，接觸項目的人看這個readme就能把前端項目跑起來。

所有的項目必須有完善的readme文檔說明，文檔內容不做限制，除了一些必要的說明，如：如何啟動項目、發版說明，只要能讓開發者更好的理解項目的內容都可以加上。

前端校驗

前端對所有需要用戶進行輸入的地方做數據校驗，如檢查輸入長度限制、內容合法限制、xss問題等。校驗規則需要跟后端一致，不合法時提示明確的錯誤信息。

網站字體使用

網站所使用的字體統一設置為：

font-family: PingFangSC, 微軟雅黑,Helvetica,Arial,sans-serif;

　　禁止使用 @font-face 引用其他未被授權的中英文字體，開源免費的字體圖標除外。

第三方庫使用

使用第三方庫時，如果只是用到了其中的少部分功能，需要注意隊報進行按需加載，減少依賴體積。

例如在使用element-ui時，在main.js中

全局引入：

import ElementUI from 'element-ui';
Vue.use(ElementUI);

按需引入：

import { Button, Select } from 'element-ui';
Vue.use(Button);
Vue.use(Select);

具體引入方式可以參照element-ui官方文檔。

Vue相關

Vue項目開發規范參考，Vue官方風格指南

https://cn.vuejs.org/v2/style-guide/index.html

在需要使用Vue的render函數時候，都應該使用JSX語法，不應該直接編寫h(createElement)函數，統一語法，并且便于他人維護。

vue變量修改

對于數組或對象類型的數據，不能直接修改其中的元素和屬性來達到觸發變化的目的，需要對修改的變量復制一個副本，對副本進行修改后，復制給需要觸發變化的變量中。

vue組件內的css

css規則（建議使用 css-modules 或者 BEM 命名規則（Bem 是塊（block）、元素（element）、修飾符（modifier）的簡寫）避免樣式沖突，不使用 scoped ），除非是單獨的封裝組件。

css-modules使用示例：

<template>
    <div class="home">
        <div class="item">{{ count }}</div>
    </div>
</template>
<style lang="scss">
.home {
    .item {
        color: red;
    }
}
</style>

BEM 命名約定的模式是：

.block {}

.block__element {}

.block--modifier {}

block 代表了更高級別的抽象或組件。
block__element 代表 .block 的后代，用于形成一個完整的 .block 的整體。
block--modifier 代表 .block 的不同狀態或不同版本。 使用兩個連字符和下劃線而不是一個，是為了讓你自己的塊可以用單個連字符來界定。如：

.sub-block__element {}

.sub-block--modifier {}

BEM命名法的好處：BEM的關鍵是，可以獲得更多的描述和更加清晰的結構，從其名字可以知道某個標記的含義。于是，通過查看 HTML 代碼中的 class 屬性，就能知道元素之間的關聯。

<div class="article">
    <div class="article__body">
        <div class="tag"></div>
        <button class="article__button--primary"></button>
        <button class="article__button--success"></button>
    </div>
</div>

v-for key的設置

不能使用index來作為key的值，必須是v-for中迭代列表中的唯一值，key的作用主要是為了高效的更新虛擬DOM。添加key之后，列表數據修改的時候，vue會去根據key值判斷某個值是否修改，如果修改，則重新渲染，否則復用之前的元素。在列表中間插入一條數據時，如果使用index作為key，則vue判定插入位置到最后數據全部發生了變化，全部需要重新渲染，而如果使用唯一id作為key，則判定只有插入的一條數據發生變化，只需要渲染這一條數據。

路由劃分

路由應該按照業務來劃分 ，根據實際場景考慮是否按需加載頁面，按需加載使用 import() 引入對應的路由組件，同時也要考慮打包形成后 chunk 的情況，chunk 太小且數量較多會導致chunk內webpack-runtime代碼量增加，導致整個打包后文件體積增大，這個時候使用一種魔法注釋用法

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')

就可以把某個路由下的所有組件都打包在同個異步塊 (chunk) 中。只需要使用 命名 chunk，一個特殊的注釋語法來提供 chunk name (需要 Webpack > 2.4)。

AJAX請求

發起ajax請求的 url 應該寫于業務代碼中，而非另開js文件進行管理。不恰當的工程化只會讓代碼難以維護。

1、axios.get('/test')    // yes
2、axios.get(Apis.test.get)    // no

公用方法

當出現重復函數時，如果該部分代碼無副作用且可分離，可以考慮將其抽離出來放到單獨的文件中統一管理，例如helpers、utils。謹慎使用mixins，因其來源不清晰，會極大增加后期維護成本。

git提交規范

提交代碼前，對自己修改的文件進行一次檢查，只對自己修改的內容進行提交，不要提交多余的文件。

css規范

縮進：使用兩個空格；

分號：每個屬性聲明末尾都要加上分號；

空格：

　　不需要空格：屬性名后、多個規則的分隔符 ',' 前、!important '!' 后、屬性值中 '(' 后和 ')' 前、行末不要有多余的空格。

　　需要空格：屬性值前、選擇器 '>', '+', '~' 前后、'{' 前、!important '!' 前、@else前后、屬性值中的 ',' 后、注釋斜杠前后。

需要空行：文件最后、'}' 后最好跟一個空行，包括scss中嵌套的規則、屬性之間需要適當的空行。

換行：‘{’ 前不需要換行

需要換行：'{' 后和 '}' 前、每個屬性單獨占一行、多個規則的分隔符 ',' 后。

命名：類名使用小寫字母，以中劃線分割、id采用駝峰式命名、scss中的變量、混合、placeholder采用駝峰式命名。

雜項：

不允許有空的規則；

元素選擇器用小寫字母；

去掉小數點前買的0；

去掉數字中不必要的小數點和后面的0；

屬性值 '0' 后面不要加單位；

同個屬性不同前綴的寫法需要在垂直方向保持對齊；

無前綴的標準屬性應該寫在有前綴的屬性后面；

不要在同個規則里面出現重復的屬性，如果重復的屬性是連續的則沒有關系；

不要再一個文件里出現兩個相同的規則；

用 border: 0; 代替 border: none;

選擇器不要超過四層（在scss中如果超過四層應該考慮用嵌套的方式來寫）；

盡量少用 ' * ' 選擇器；

html

語法

縮進：兩個空格；

嵌套的節點要進行縮進；

在屬性上 ，使用雙括號，不要使用單括號；

屬性名全小寫，用中劃線做分隔符；

不要在自動閉合標簽結尾處使用斜線（HTML5 規范 指出他們是可選的）；

不要忽略可選的關閉標簽

HTML5 doctype

在頁面開頭使用這個簡單的doctype來啟用標準模式，使其在每個瀏覽器中盡可能一致的展示；雖然doctype不區分大小寫，但是按照慣例，doctype大寫（關于html屬性，大寫還是小寫）。

<!DOCTYPE html>
<html>
...
</html>

lang屬性

根據html5規范：應在html標簽上加上lang屬性，這會給語音工具和翻譯工具幫助，告訴它們應該怎么去發音和翻譯。

<!DOCTYPE html>
<html lang="zh-cn">
...
</html>

字符編碼

通過聲明一個明確的字符編碼，讓瀏覽器輕松、快速的確定適合網頁內容的渲染方式，通常指定為 'UTF-8'。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
</head>
...
</html>

IE兼容模式

用標簽可以指定頁面應該用什么版本的IE來渲染，不同doctype在不同瀏覽器下會觸發不同的渲染模式

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=Edge">
</head>
...
</html>　　

引入css、js

根據HTML5規范，通常在引入css和js時不需要指明 type，因為 text/css 和 text/javascript 分別是他們的默認值。

屬性順序

為保證代碼易讀性，屬性應按照特定的順序出現。

class
id
name
data-*
src, for, type, href, value, max-length, max, min, pattern
placeholder, title, alt
aria-*, role
required, readonly, disabled

class 是為高可復用組件設計的，所以應處于第一位；

id 更加具體且應該盡量少使用，所以應該放在第二位；

Boolean屬性

Boolean屬性指不需要聲明取值的屬性，xhtml需要每個屬性聲明取值，但HTML5并不需要；

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
    <option value="1" selected></option>
</select>

js生成標簽　　

在js文件中生成標簽讓內容變得更加難查找，更難編輯，性能更差。應該盡量避免這種情況的出現。

減少標簽數量

在編寫HTML代碼時，需要盡量避免多余的父節點；很多時候，需要通過迭代和重構來使HTML變得更少。

js規范

使用standard規范https://github.com/standard/standard

對應編輯器的配置方法查看上面的 github 鏈接

一般情況下前端項目工程中會使用ESLint進行JS代碼的規范，如果是.js文件可以支持自動修改規范的功能，.vue 文件由于編譯原因無法支持。掌握本規范的最好方法是安裝并在自己的代碼中使用它。

總結

以上是生活随笔為你收集整理的前端开发规范的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。