專案工程規範

1. 檔案命名規則

檔名稱統一用小寫的英文字母、數字和下劃線的組合，其中不得包含漢字、空格和特殊字元；命名原則的指導思想一是使得你自己和工作組的每一個成員能夠方便的理解每一個檔案的意義，二是當我們在資料夾中使用“按名稱排例”的命令時，同一種大類的檔案能夠排列在一起，以便我們查詢、修改、替換、計算負載量等等操作。

• 命名規範：參考 Code Guide

  • 全部採用小寫方式， 以下劃線分隔。例：my_project_name
  • 完整英文命名的用複數形式，縮寫用單數形式。例：scripts, js, styles, css, images, img

• 模組化分組規範：參考 靜態脫敏前端工程

• 檔案大小約束

2. 檔案註釋

檔案註釋用於告訴不熟悉這段程式碼的讀者這個檔案中包含哪些東西。 應該提供檔案的大體內容, 它的作者, 依賴關係和相容性資訊。如下:

    /**
     *@功能說明
     *@作者
     *Copyright *******      
     */

3. 檔案存放位置規範

以靜態前端專案為例

|-- FE/                      # 應用主目錄
   |-- dist                 # 前端釋出打包生成的目錄
   |-- logs                 # mock本地開發服務生成的日誌目錄
   |-- mock                 # mock本地開發目錄
   |-- public               # 靜態檔案目錄（打包時直接複製到dist目錄下）
   |-- src/                 # 開發目錄
       |-- assets/          # 主要存放一些靜態圖片資源的目錄
           |-- ...
       |-- components/      # 這裡存放的是開發需要的的各種元件，各個元件聯絡在一起組成一個完整的專案。
           |-- ...
       |-- filters/         # 專案過濾器目錄
           |-- ...
       |-- lib/             # 專案公共類或函式目錄
           |-- ...
       |-- plugins/         # 專案公共外掛目錄
           |-- ...
       |-- router/         # 專案路由目錄
           |-- ...
       |-- styles/         # 專案樣式目錄
           |-- ...
       |-- views/          # 專案檢視目錄
           |-- ...
       |-- App.vue         # 是專案主元件，也是專案所有元件和路由的出口，之後它會被渲染到專案根目錄的 index.html 中顯示出來，我們可以在這裡寫一些適合全域性的css樣式。
       |-- main.js         # 入口檔案，引入了vue模組和app.vue元件以及路由router，我們需要在全域性使用的一些東西也可以定義在這裡面。

   |-- babel.config        # ES6語法編譯配置
   |-- .editorconfig       # 程式碼編寫規格
   |-- .eslintignore       # 專案的根目錄中建立檔案來告訴ESLint忽略特定的檔案和目錄，該檔案是純文字檔案
   |-- .eslintrc.js        # eslint的配置檔案，eslint是用來管理和檢測js程式碼風格的工具，可以和編輯器搭配使用，如vscode的eslint外掛，當有不符合配置檔案內容的程式碼出現就會報錯或者警告
   |-- .gitignore          # 忽略的檔案。
   |-- postcssrc.js        # 相容選項（如果已經安裝postcss，需要一大堆loader配置，這時專案根目錄會生成“.postcssrc.js”檔案）。
   |-- .browserslistrc     # 瀏覽器css相容選項
   |-- package.json        # 專案及工具的依賴配置檔案。
   |-- README.md           # 專案說明。
   |-- vue.config          # 專案構建的配置檔案
 

本地開發完成後，把構建好的檔案（dist）傳到伺服器相應的位置就好了。（構建的時候要處理好檔案路徑引用）。如果是整合到spring boot 中，請參考Vue專案部署到sping boot 方案

4 框架、工具規範

專案結構規範包括檔案、目錄命名規範，模組化分組規範，元件化規範等等，這些規範有些是構建工具要求的，有些是團隊自己定的。
* 目錄結構的統一化，可讀性，分模組、元件構建，嚴禁構建雜亂無章，毫無可讀性而言的專案目錄。
* 瞭解開發當前專案所需的框架，工具、外掛，功能，相容性，解析度等問題做好準備工作，做到心中有數。
* 目錄結構整齊劃一，方便日後的維護和其他同事的閱讀。
* 在技術上，每個團隊都有框架選型，都遵循一定的規範協作。基本上從團隊搭建之初便需要定下今後團隊的技術選型，並且最好不要更改選定好的框架和 UI 庫，因為不同的框架、不同的 UI 庫一般相互之間是不相容的；同時用多個框架或 UI 庫也是要儘量避免的。
 

框架

• jquery
• vue
• angularjs
• react
• …

UI 庫

PC

• bootstrap
• element
• ant-design
• material-ui
• Semantic-ui
• …

Mobile

• mint-ui
• amazeui
• vux
• …

組合

• jquery + bootstrap
• vue + element
• angularjs + bootstrap
• …

構建工具

構建工具的使用使開發變得極為便利和高效，工具在提升工作效率的同時，也同時提供了約束團隊編碼規範、專案結構規範等的可能性。

• eslint：一個語法規則和程式碼風格的檢查工具，可以用來保證寫出語法正確、風格統一的程式碼。
• stylelint：一個強大和現代的 CSS 審查工具，有助於開發者推行統一的程式碼規範，避免樣式錯誤。
• csslint：與 stylelint 類似

約束專案結構規範需要團隊討論來定，但基本上需要滿足以下幾個需求：

• 便利性：能夠快速的定位檔案位置，對編輯器友好
• 解耦性：不同頁面之間，不同元件之間是相互解耦的，不會更改一個元件或頁面而影響到其他元件或頁面
• 擴充套件性：能夠很方便的擴充套件元件和頁面，而不會帶來副作用
• 閱讀性：具有很好的閱讀性，對元件、頁面以及內部結構能夠一目瞭然

以 靜態脫敏前端工程 構建工具為例，它的 工作空間 概念便很好的滿足上述所有需求：

比如，demo 頁的工作空間（/project/src/demo/），這個頁面（或者元件）所有檔案都在這個目錄下等等。

• 開發的時候，都只在這個目錄下工作，避免多級目錄的不斷切換（當工程很大的時候，這是個大問題）
• 當新新增一個頁面或元件的時候，直接複製一個原有的頁面或元件，這是極為方便的
• 解耦當然就不用說了，內部結構也是很清晰的
• 一目瞭然可以找到工程用到哪些公用的元件，樣式，例項化資料等，防止多餘的開發工作以及減少開發週期
• 方便後期的維護和其他成員使用

5. 後續

重要：每個專案根據產品的不同，選擇該產品使用的專案框架或者搭建合適產品的框架，無論選擇或者搭建框架，保證目錄一目瞭然，哪個目錄或者哪個檔案做什麼功能等，每個專案中都要有該專案的一些說明，釋出流程，以及規範和約束（畢竟一個專案是多人蔘與，以便以後的拓展和維護）。

如果文件有更好的補充和好的建議，歡迎聯絡@博主

如有雷同，請聯絡@博主。