目錄

6、 拓展 6

一、文件管理

1.1 文件資訊

1.2 修改記錄

• 結構目錄

├── build                      // 構建相關  

├── config                     // 配置相關

├── src                        // 原始碼

│   ├── api                    // 所有請求

│   ├── assets                 // 主題 字型等靜態資源

│   ├── components             // 全域性公用元件

│   ├── directive              // 全域性指令

│   ├── filtres                // 全域性 filter

│   ├── icons                  // 專案所有 svg icons

│   ├── lang                   // 國際化 language

│   ├── mock                   // 專案mock 模擬資料

│   ├── router                 // 路由

│   ├── store                  // 全域性 store管理

│   ├── styles                 // 全域性樣式

│   ├── utils                  // 全域性公用方法

│   ├── vendor                 // 公用vendor

│   ├── views                   // view

│   ├── App.vue                // 入口頁面

│   ├── main.js                // 入口 載入元件 初始化等

│   └── permission.js          // 許可權管理

├── static                     // 第三方不打包資源

│   └── Tinymce                // 富文字

├── .babelrc                   // babel-loader 配置

├── eslintrc.js                // eslint 配置項

├── .gitignore                 // git 忽略項

├── favicon.ico                // favicon圖示

├── index.html                 // html模板

└── package.json               // package.json

• 編輯要求

檔名以小寫開頭，取有意義的英文名字，H5檔名與對應的JS檔名相同，命名以模組名開頭加數字（該模組第幾個檔案），加一槓，以內容名結尾，如live1-ctrol.vue。

2、檔案格式

UTF-8格式

3、頁面中id命名要求

除入口頁外，一個頁面就是一個Page，每個Page有唯一ID，該ID命名以模組名開頭加一槓，以內容名結尾，如login-wrap

4、H5檔案內容要求

1）、功能模組的入口頁，需要包含基本類庫，以及入口頁對應的JS指令碼，其他子頁面只有一個Page內容。

2）、對沒有任何業務邏輯控制的頁面，可以直接跳轉。

3）、對於有業務邏輯控制的頁面，應繫結連結事件方式，在事件中需要顯示loading層，轉到目標頁面後，再隱藏loading層。

4）、彈框、select等需要大量程式碼去實現，要以元件的方式引入。

5、JS內容要求

1）、需要用請求和公共方法的檔案，要用import引入：

import store from '@/store'

import { login, logout, getInfo } from '@/api/login'

2）、子元件引入方式：

公共元件經常使用如： header,footer等會一起打包到公共js檔案。

先import LoginComponent from './login.vue'

再暴露 components: {

      /* 引入登陸元件*/

      'v_loginComponent': LoginComponent

    };

3）、暴露出去的部分，要按順序：

export default {

name: 'index',                                         名稱

components: {},                                        元件

data() {return{}},                                     資料

methods: {},                                           操作方法

watch: {'checkboxModel': {}},                          監聽

computed : {"val" : function() {return "123";}}        計算屬性

    beforeCreate: function () {},                         建立之前                         

    created: function () {},                              建立完成

    beforeMount: function () {},   掛載之前

    mounted: function () {},                              掛載完成                             

    beforeUpdate: function () {},                         更新之前

    updated: function () {},                              更新完成

    beforeDestroy: function () {},                        銷燬之前

    destroyed: function () {}                             銷燬完成

}

4、Css要求

1）、vue以區域性css來寫<style lang="less" scoped></style>只作用於當前vue檔案。

2）、公共使用的css要單獨放在一個資料夾裡（less.css）。

5、介面請求

1）、請求用Axios ，Axios 的所有請求請使用公共的request.js的方法，配合編輯api介面檔案。

2）、看後臺需要配置post、get請求，所有的請求均會自動帶上token（登陸api除外），後臺需要校驗token的失效性。另外put（PUT 往伺服器上上傳檔案），或者其他個性化請求另外處理。

程式碼註釋在一個專案的後期維護中顯的尤為重要，所以我們要為每一個被複用的元件編寫元件使用說明，為元件中每一個方法編寫方法說明。

以下情況，務必添加註釋：

1）、公共元件使用說明

2）、各元件中重要函式或者類說明

3）、複雜的業務邏輯處理說明

4）、特殊情況的程式碼處理說明,對於程式碼中特殊用途的變數、存在臨界值、函式中使用的hack、使用了某種演算法或思路等需要進行註釋描述

5）、註釋塊必須以/**（至少兩個星號）開頭**/；

6）、單行註釋使用//；

單行註釋

    普通方法一般使用單行註釋// 來說明該方法主要作用

多行註釋

     元件使用說明，和呼叫說明

   <!--公用元件：資料表格

      /**

      * 元件名稱

      * @module 元件存放位置

      * @desc 元件描述

      * @author 元件作者

      * @date 2018年8月13日17:22:43

      * @param {Object} [title]    - 引數說明

      * @param {String} [columns] - 引數說明

      * @example 呼叫示例

      *  <hbTable :title="title" :columns="columns" :tableData="tableData"></hbTable>

          */

       -->

1. 拓展

在vuex中，多個元件或者模組共享的資料，能用local storage的就不要用vuex；引入模組或者元件進行npm安裝的時候，請不要漏掉--save，避免漏掉註冊進package.json檔案中。