Vue踩坑---組件命名一定要規範

一、組件命名

  在寫Vue項目的時候,用cube-ui的createAPI創建一個組件,結果運行的時候,報錯信息是這樣的:

在這裏插入圖片描述
  怎麼可能,讓我npm 安裝?這不是npm的事。後來又排查了老半天,把shopcart的組件名給改成了shop-cart,不報錯了,沒想到shop-cart組件名會影響到shoop-cart-list。Vue給出了官方的命名規範:

在這裏插入圖片描述

當註冊組件 (或者 prop) 時,可以使用 kebab-case (短橫線分隔命名)、camelCase (駝峯式命名) 或 PascalCase (單詞首字母大寫命名)。
PascalCase 是最通用的聲明約定而 kebab-case 是最通用的使用約定。

命名可遵循以下規則:

1、有意義的名詞、簡短、具有可讀性
2、以小寫開頭,採用短橫線分割命名
3、基礎組件名以Base、App 或 V開頭
4、文件夾命名主要以功能模塊代表命名

  這就是我的問題所在!😅😅
  以後開發一定要注意命名規範,減少不必要的問題,且容易維護。

二、Vue組件中的方法書寫順序

    - components   
    - props    
    - data     
    - created
    - mounted
    - activited
    - update
    - beforeRouteUpdate
    - metods   
    - filter
    - computed
    - watch

還有很多細節問題,大家可以參考Vuejs的官方文檔風格指南

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章