vue前端開發規範

2021-10-06 22:36:03 字數 2589 閱讀 2076

建議使用統一開發工具vscode;

使用統一縮排,以tab縮排;

注釋規範主要是作者規範和函式規範。

作者規範:

/*

* @author:

* @date: 2020-06-01 11:58:32

* @lasteditors:

*/

函式規範:

/**

* @description:

* @author:

* @date: 2020-06-08 10:57:39

* @param

* @return:

*/

1. 元件名為多個單詞

這樣做可以避免跟現有的以及未來的 html 元素相衝突,因為所有的 html 元素名稱都是單個單詞的。

反例:

vue.

component

('todo'

,)

好例子:

vue.

component

('todo-item'

,)

2.單檔案元件檔案的大小寫

單檔案元件的檔名應該要麼始終是單詞大寫開頭 (pascalcase),要麼始終是橫線連線 (kebab-case)。這裡我們統一使用單詞大寫開頭。

反例:

components/

|- mycomponent.vue

components/

|- mycomponent.vue

好例子:

components/

|- mycomponent.vue

components/

|- my-component.vue

3.元件名中的單詞順序

元件名應該以高階別的 (通常是一般化描述的) 單詞開頭,以描述性的修飾詞結尾。

反例:

components/

|- clearsearchbutton.vue

|- excludefromsearchinput.vue

|- launchonstartupcheckbox.vue

|- runsearchbutton.vue

|- searchinput.vue

|- termscheckbox.vue

好例子:

components/

|- searchbuttonclear.vue

|- searchbuttonrun.vue

|- searchinputquery.vue

|- searchinputexcludeglob.vue

|- settingscheckboxterms.vue

|- settingscheckboxlaunchonstartup.vue

這樣很容易就能看出來哪些元件是針對搜尋的了。

4.完整單詞的元件名

元件名應該傾向於完整單詞而不是縮寫。

編輯器中的自動補全已經讓書寫長命名的代價非常之低了,而其帶來的明確性卻是非常寶貴的。不常用的縮寫尤其應該避免。

反例:

components/

|- sdsettings.vue

|- uprofopts.vue

好例子:

components/

|- studentdashboardsettings.vue

|- userprofileoptions.vue

5.prop 名大小寫

在宣告 prop 的時候,其命名應該始終使用 camelcase,而在模板和 jsx 中應該始終使用 kebab-case。

反例:

props:

"hi"

/>

好例子:

props:

"hi"

/>

1. 為元件樣式設定作用域

方案:

2. 樣式盡量不寫內聯模式

比如style=""這種模式。

3.盡可能不寫float浮動,禁止濫用定位。1. 為 v-for 設定鍵值

在元件上總是必須用 key 配合 v-for,以便維護內部元件及其子樹的狀態。而且不加key值時編譯器會提示報錯。

反例:

v-for=

"todo in todos"

>

}<

/li>

<

/ul>

好例子:

v-for=

"todo in todos"

:key=

"todo.id"

>

}<

/li>

<

/ul>

2.隱性的父子元件通訊

應該優先通過 prop 和事件進行父子元件之間的通訊,而不是 this.$parent 或變更 prop。

參考文件

前端vue開發規範

1.建議使用vscode 可根據個人開發習慣進行選擇 2.vscode 使用外掛程式建議 3.使用統一縮排,以tab縮排,乙個tab大小為2個空格 1.變數名,檔名,元件名,檔名等遵循駝峰命名規則 多單詞拼接首字母小寫,如 userinfo productinfo 同時遵循語義化規則,能直觀明白意圖...

前端開發規範

前端開發 lang zh cn name renderer content webkit 錯誤示例 body html dom 上面的 會導致一下問題 names 2 插入頁面後,推薦的angularjs寫法 3.4.4 jquey呼叫angularjs的方法 思路 取得angularjs作用域下的...

前端開發規範

1.變數與函式命名 駝峰式 2.元件命名 首字母大寫駝峰式 3.常量命名 字母大寫,單詞間用下劃線分隔 4.優先使用箭頭函式,如果只有乙個引數,也必須function 5.使用模板字串取代連線字串,www.name com 改為www.com 6.宣告變數使用let或const,結束後加分號。7.對...