vue項目名不可以用中文。在vue中，項目名不能帶中文、大寫字母、特殊符號，項目名可采用小寫方式，以短橫線分隔，例“my-project-name”。而在單文件組件和字符串模板中組件名應(yīng)該總是PascalCase的，但是在DOM模板中總是kebab-case的。

本教程操作環(huán)境：windows7系統(tǒng)、vue3版，DELL G3電腦。

一、命名規(guī)范

市面上常用的命名規(guī)范：

• camelCase （小駝峰式命名法–首字母小寫）
• PascalCase （大駝峰式命名法–首字母大寫）
• kebab-case（短橫線連接式）
• Snake（下劃線連接式）

1.1 項目文件命名

規(guī)則可以快速記憶為“靜態(tài)文件下劃線，編譯文件短橫線”。

1.1.1 項目名

項目名不能帶中文、大寫字母、特殊符號。

英文全部采用小寫方式，以短橫線分隔。例：my-project-name

1.1.2 目錄名

參照項目命名規(guī)則，有復(fù)數(shù)結(jié)構(gòu)時，要采用復(fù)數(shù)命名法。例：docs、assets、components、directives、mixins、utils、views

my-project-name/ |- BuildScript    // 流水線部署文件目錄 |- docs           // 項目的細(xì)化文檔目錄（可選） |- nginx          // 部署在容器上前端項目 nginx 代理文件目錄 |- node_modules   // 下載的依賴包 |- public         // 靜態(tài)頁面目錄     |- index.html // 項目入口 |- src            // 源碼目錄     |- api        // http 請求目錄     |- assets     // 靜態(tài)資源目錄，這里的資源會被wabpack構(gòu)建         |- icon   // icon 存放目錄         |- img    // 圖片存放目錄         |- js     // 公共 js 文件目錄         |- scss   // 公共樣式 scss 存放目錄             |- frame.scss   // 入口文件             |- global.scss  // 公共樣式             |- reset.scss   // 重置樣式     |- components     // 組件     |- plugins        // 插件     |- router         // 路由     |- routes         // 詳細(xì)的路由拆分目錄（可選）         |- index.js     |- store          // 全局狀態(tài)管理     |- utils          // 工具存放目錄         |- request.js // 公共請求工具     |- views          // 頁面存放目錄     |- App.vue        // 根組件     |- main.js        // 入口文件     |- tests          // 測試用例     |- .browserslistrc// 瀏覽器兼容配置文件     |- .editorconfig  // 編輯器配置文件     |- .eslintignore  // eslint 忽略規(guī)則     |- .eslintrc.js   // eslint 規(guī)則     |- .gitignore     // git 忽略規(guī)則     |- babel.config.js // babel 規(guī)則     |- Dockerfile // Docker 部署文件     |- jest.config.js     |- package-lock.json     |- package.json // 依賴     |- README.md // 項目 README     |- vue.config.js // webpack 配置

1.1.3 圖像文件名

全部采用小寫方式， 優(yōu)先選擇單個單詞命名，多個單詞命名以下劃線分隔。

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 文件名

全部采用小寫方式， 優(yōu)先選擇單個單詞命名，多個單詞命名以下劃線分隔。

|- error_report.html |- success_report.html

1.1.5 CSS 文件名

全部采用小寫方式， 優(yōu)先選擇單個單詞命名，多個單詞命名以短橫線分隔。

|- normalize.less |- base.less |- date-picker.scss |- input-number.scss

1.1.6 JavaScript 文件名

全部采用小寫方式， 優(yōu)先選擇單個單詞命名，多個單詞命名以短橫線分隔。

|- index.js |- plugin.js |- util.js |- date-util.js |- account-model.js |- collapse-transition.js

上述規(guī)則可以快速記憶為“靜態(tài)文件下劃線，編譯文件短橫線”。

1.2 Vue 組件命名

1.2.1 單文件組件名

文件擴(kuò)展名為.vue的single-file components(單文件組件)。單文件組件名應(yīng)該始終是單詞大寫開頭 (PascalCase)。

components/ |- MyComponent.vue

1.2.2 單例組件名

只擁有單個活躍實例的組件應(yīng)該以 The 前綴命名，以示其唯一性。

這不意味著組件只可用于一個單頁面，而是_每個頁面_只使用一次。這些組件永遠(yuǎn)不接受任何 prop，因為它們是為你的應(yīng)用定制的。如果你發(fā)現(xiàn)有必要添加 prop，那就表明這實際上是一個可復(fù)用的組件，_只是目前_在每個頁面里只使用一次。

比如，頭部和側(cè)邊欄組件幾乎在每個頁面都會使用，不接受 prop，該組件是專門為該應(yīng)用所定制的。

components/ |- TheHeading.vue |- TheSidebar.vue

1.2.3 基礎(chǔ)組件名

基礎(chǔ)組件：不包含業(yè)務(wù)，獨(dú)立、具體功能的基礎(chǔ)組件，比如日期選擇器、模態(tài)框等。這類組件作為項目的基礎(chǔ)控件，會被大量使用，因此組件的 API 進(jìn)行過高強(qiáng)度的抽象，可以通過不同配置實現(xiàn)不同的功能。

應(yīng)用特定樣式和約定的基礎(chǔ)組件(也就是展示類的、無邏輯的或無狀態(tài)、不摻雜業(yè)務(wù)邏輯的組件) 應(yīng)該全部以一個特定的前綴開頭 —— Base。

基礎(chǔ)組件在一個頁面內(nèi)可使用多次，在不同頁面內(nèi)也可復(fù)用，是高可復(fù)用組件。

components/ |- BaseButton.vue |- BaseTable.vue |- BaseIcon.vue

1.2.4 業(yè)務(wù)組件

業(yè)務(wù)組件：它不像基礎(chǔ)組件只包含某個功能，而是在業(yè)務(wù)中被多個頁面復(fù)用的（具有可復(fù)用性），它與基礎(chǔ)組件的區(qū)別是，業(yè)務(wù)組件只在當(dāng)前項目中會用到，不具有通用性，而且會包含一些業(yè)務(wù)，比如數(shù)據(jù)請求；而基礎(chǔ)組件不含業(yè)務(wù)，在任何項目中都可以使用，功能單一，比如一個具有數(shù)據(jù)校驗功能的輸入框。

摻雜了復(fù)雜業(yè)務(wù)的組件（擁有自身 data、prop 的相關(guān)處理）即業(yè)務(wù)組件應(yīng)該以 Custom 前綴命名。

業(yè)務(wù)組件在一個頁面內(nèi)比如：某個頁面內(nèi)有一個卡片列表，而樣式和邏輯跟業(yè)務(wù)緊密相關(guān)的卡片就是業(yè)務(wù)組件。

components/ |- CustomCard.vue

1.2.5 緊密耦合的組件名

和父組件緊密耦合的子組件應(yīng)該以父組件名作為前綴命名。
因為編輯器通常會按字母順序組織文件，所以這樣做可以把相關(guān)聯(lián)的文件排在一起。

components/ |- TodoList.vue |- TodoListItem.vue |- TodoListItemButton.vue

1.2.6 組件名中單詞順序

組件名應(yīng)該以高級別的 (通常是一般化描述的) 單詞開頭，以描述性的修飾詞結(jié)尾。

因為編輯器通常會按字母順序組織文件，所以現(xiàn)在組件之間的重要關(guān)系一目了然。如下組件主要是用于搜索和設(shè)置功能。

components/ |- SearchButtonClear.vue |- SearchButtonRun.vue |- SearchInputQuery.vue |- SearchInputExcludeGlob.vue |- SettingsCheckboxTerms.vue |- SettingsCheckboxLaunchOnStartup.vue

還有另一種多級目錄的方式，把所有的搜索組件放到“search”目錄，把所有的設(shè)置組件放到“settings”目錄。我們只推薦在非常大型 (如有 100+ 個組件) 的應(yīng)用下才考慮這么做，因為在多級目錄間找來找去，要比在單個 components 目錄下滾動查找要花費(fèi)