站長資訊網
vue項目名不可以用中文。在vue中，項目名不能帶中文、大寫字母、特殊符號，項目名可采用小寫方式，以短橫線分隔，例“my-project-name”。而在單文件組件和字符串模板中組件名應該總是PascalCase的，但是在DOM模板中總是kebab-case的。
本教程操作環境：windows7系統、vue3版，DELL G3電腦。
一、命名規范
市面上常用的命名規范：
- camelCase （小駝峰式命名法–首字母小寫）
- PascalCase （大駝峰式命名法–首字母大寫）
- kebab-case（短橫線連接式）
- Snake（下劃線連接式）
1.1 項目文件命名
規則可以快速記憶為“靜態文件下劃線，編譯文件短橫線”。
1.1.1 項目名
項目名不能帶中文、大寫字母、特殊符號。
英文全部采用小寫方式，以短橫線分隔。例：my-project-name
1.1.2 目錄名
參照項目命名規則，有復數結構時，要采用復數命名法。例：docs、assets、components、directives、mixins、utils、views
my-project-name/ |- BuildScript // 流水線部署文件目錄 |- docs // 項目的細化文檔目錄（可選） |- nginx // 部署在容器上前端項目 nginx 代理文件目錄 |- node_modules // 下載的依賴包 |- public // 靜態頁面目錄 |- index.html // 項目入口 |- src // 源碼目錄 |- api // http 請求目錄 |- assets // 靜態資源目錄，這里的資源會被wabpack構建 |- icon // icon 存放目錄 |- img // 圖片存放目錄 |- js // 公共 js 文件目錄 |- scss // 公共樣式 scss 存放目錄 |- frame.scss // 入口文件 |- global.scss // 公共樣式 |- reset.scss // 重置樣式 |- components // 組件 |- plugins // 插件 |- router // 路由 |- routes // 詳細的路由拆分目錄（可選） |- index.js |- store // 全局狀態管理 |- utils // 工具存放目錄 |- request.js // 公共請求工具 |- views // 頁面存放目錄 |- App.vue // 根組件 |- main.js // 入口文件 |- tests // 測試用例 |- .browserslistrc// 瀏覽器兼容配置文件 |- .editorconfig // 編輯器配置文件 |- .eslintignore // eslint 忽略規則 |- .eslintrc.js // eslint 規則 |- .gitignore // git 忽略規則 |- babel.config.js // babel 規則 |- Dockerfile // Docker 部署文件 |- jest.config.js |- package-lock.json |- package.json // 依賴 |- README.md // 項目 README |- vue.config.js // webpack 配置
登錄后復制
1.1.3 圖像文件名
全部采用小寫方式， 優先選擇單個單詞命名，多個單詞命名以下劃線分隔。
banner_sina.gif menu_aboutus.gif menutitle_news.gif logo_police.gif logo_national.gif pic_people.jpg pic_TV.jpg
登錄后復制
1.1.4 HTML 文件名
全部采用小寫方式， 優先選擇單個單詞命名，多個單詞命名以下劃線分隔。
|- error_report.html |- success_report.html
登錄后復制
1.1.5 CSS 文件名
全部采用小寫方式， 優先選擇單個單詞命名，多個單詞命名以短橫線分隔。
|- normalize.less |- base.less |- date-picker.scss |- input-number.scss
登錄后復制
1.1.6 JavaScript 文件名
全部采用小寫方式， 優先選擇單個單詞命名，多個單詞命名以短橫線分隔。
|- index.js |- plugin.js |- util.js |- date-util.js |- account-model.js |- collapse-transition.js
登錄后復制
上述規則可以快速記憶為“靜態文件下劃線，編譯文件短橫線”。
1.2 Vue 組件命名
1.2.1 單文件組件名
文件擴展名為.vue的single-file components(單文件組件)。單文件組件名應該始終是單詞大寫開頭 (PascalCase)。
components/ |- MyComponent.vue
登錄后復制
1.2.2 單例組件名
只擁有單個活躍實例的組件應該以 The 前綴命名，以示其唯一性。
這不意味著組件只可用于一個單頁面，而是_每個頁面_只使用一次。這些組件永遠不接受任何 prop，因為它們是為你的應用定制的。如果你發現有必要添加 prop，那就表明這實際上是一個可復用的組件，_只是目前_在每個頁面里只使用一次。
比如，頭部和側邊欄組件幾乎在每個頁面都會使用，不接受 prop，該組件是專門為該應用所定制的。
components/ |- TheHeading.vue |- TheSidebar.vue
登錄后復制
1.2.3 基礎組件名
基礎組件：不包含業務，獨立、具體功能的基礎組件，比如日期選擇器、模態框等。這類組件作為項目的基礎控件，會被大量使用，因此組件的 API 進行過高強度的抽象，可以通過不同配置實現不同的功能。
應用特定樣式和約定的基礎組件(也就是展示類的、無邏輯的或無狀態、不摻雜業務邏輯的組件) 應該全部以一個特定的前綴開頭 —— Base。
基礎組件在一個頁面內可使用多次，在不同頁面內也可復用，是高可復用組件。
components/ |- BaseButton.vue |- BaseTable.vue |- BaseIcon.vue
登錄后復制
1.2.4 業務組件
業務組件：它不像基礎組件只包含某個功能，而是在業務中被多個頁面復用的（具有可復用性），它與基礎組件的區別是，業務組件只在當前項目中會用到，不具有通用性，而且會包含一些業務，比如數據請求；而基礎組件不含業務，在任何項目中都可以使用，功能單一，比如一個具有數據校驗功能的輸入框。
摻雜了復雜業務的組件（擁有自身 data、prop 的相關處理）即業務組件應該以 Custom 前綴命名。
業務組件在一個頁面內比如：某個頁面內有一個卡片列表，而樣式和邏輯跟業務緊密相關的卡片就是業務組件。
components/ |- CustomCard.vue
登錄后復制
1.2.5 緊密耦合的組件名
和父組件緊密耦合的子組件應該以父組件名作為前綴命名。
因為編輯器通常會按字母順序組織文件，所以這樣做可以把相關聯的文件排在一起。
components/ |- TodoList.vue |- TodoListItem.vue |- TodoListItemButton.vue
登錄后復制
1.2.6 組件名中單詞順序
組件名應該以高級別的 (通常是一般化描述的) 單詞開頭，以描述性的修飾詞結尾。
因為編輯器通常會按字母順序組織文件，所以現在組件之間的重要關系一目了然。如下組件主要是用于搜索和設置功能。
components/ |- SearchButtonClear.vue |- SearchButtonRun.vue |- SearchInputQuery.vue |- SearchInputExcludeGlob.vue |- SettingsCheckboxTerms.vue |- SettingsCheckboxLaunchOnStartup.vue
登錄后復制
還有另一種多級目錄的方式，把所有的搜索組件放到“search”目錄，把所有的設置組件放到“settings”目錄。我們只推薦在非常大型 (如有 100+ 個組件) 的應用下才考慮這么做，因為在多級目錄間找來找去，要比在單個 components 目錄下滾動查找要花費
