vue

A Vue.js project

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

For a detailed explanation on how things work, check out the guide and docs for vue-loader.

目錄結(jié)構(gòu)

├── build                                                         // 構(gòu)建相關(guān)
├── config                                                        // 配置相關(guān)
├── src                                                           // 源代碼
│   ├── api                                                       // 接口
│   ├── assets                                                    // 靜態(tài)資源
│   ├── components                                                // 組件
│   ├── cnfig                                                     // axios的配置
│   ├── js                                                        // 公用js
│   ├── router                                                    // 路由
│   ├── store                                                     // vuex
│   │   ├─ modules                                                // 狀態(tài)庫模塊
│   │   ├─ actions                                                // 公用異步操作
│   │   ├─ getters                                                // 獲取公用states
│   │   ├─ index                                                  // 總和vuex輸出
│   │   ├─ mutations                                              // 公用同步修改
│   │   ├─ states                                                 // 公用狀態(tài)
│   ├── styles                                                    // 公用樣式
│   ├── router                                                    // 路由views
│   ├── views                                                     // 頁面
│   └── App.vue                                                   // 入口文件
├── package.json                                                  // package.json
└── README.md                                                     // 文檔

components下的目錄結(jié)構(gòu)

├── assembly                                          // 公用組件
│  ├── card                                           // 卡片
│  ├── popup                                          // 彈窗
│  └── queryForm                                      // 查詢條件組件
├── js                                                // 輸出組件
│  ├──publicAssembl.js                                // 輸出公用組件
│  └──wsAssembly.js                                   // 輸出彈窗組件
└── views                                             // 視圖層組件結(jié)構(gòu)和views層相同

views下的目錄結(jié)構(gòu)

注：router下modules和views相同，添加頁面請實時更新文檔

├── content                                                // 右側(cè)頁面部分
│   ├── customer                                           // 客戶
│   │   ├── customerManagement                             // 客戶管理
│   │   │   │   ├── customerManagement                     // 客戶管理
│   │   │   └   └    └── modules                           // 客戶管理下的頁面
│   ├── shop                                               // 店鋪
│   │   ├── order                                          // 訂單管理
│   │   │   └── modules                                    // 訂單管理下的頁面
│   │   ├── storeManagement                                // 店鋪管理
│   │   └   └── modules                                    // 店鋪管理下的頁面
│   ├── weChat                                             // 微信
│   │    ├── weChatManagement                              // 微信管理
│   └    └  └── modules                                    // 微信管理下的頁面
├── index                                                  // 首頁
├── login                                                  // 登陸
├── home                                                   // 二級入口文件

vue內(nèi)的結(jié)構(gòu),生命周期內(nèi)不可寫邏輯蓖捶，只可調(diào)用methods內(nèi)的方法

beforeCreate除外

export default {

  name: 'index',

  props: {},

  components: {},

  created () {}, // 生命周期按照官方給的順序?qū)?不可顛倒 全部寫到data之前

  data () {},

  methods: {},

  computed: {},

  watch: {}

}

規(guī)范

• views的結(jié)構(gòu)目錄是根據(jù)左側(cè)菜單層級而來地回，創(chuàng)建文件及目錄要以菜單結(jié)構(gòu)為標(biāo)準(zhǔn)
• router/modules 是和views/content相同的
• components/views 和views同樣相同
• common.js 內(nèi)的每一個方法要寫注釋如，methods內(nèi)的方法也要寫注釋

/**
   * 數(shù)組深度拷貝
   * @arr { Array }
   * */
  copyArray (arr) {
    if (!arr || !arr.length) {
      return []
    }
    return arr.map((e) => {
      if (typeof e === 'object') {
        return Object.assign({}, e)
      } else {
        return e
      }
    })
  }

• 聲明變量 用let 和 常量用const 不可以使用val
• 所有的class名腺阳、id名稱 以小寫名稱 用中劃線分開
• 重復(fù)或超過兩次使用的方法或組件落君，請封裝。
• 彈窗統(tǒng)一放到components/popup/modues內(nèi)
• 請求接口統(tǒng)一放到api文件夾內(nèi),文件以一級菜單為命名
• vuex common.js axios已掛載到原型鏈上可以直接調(diào)用.如:

this.$common.aaa()
this.$axios.get()
this.$store

組件

查詢用的表單

query.png

laber：表單前文字
form-width: 文字后輸入框或下拉框?qū)挾? 默認(rèn)177px

<ws-query-form label="手機號：" form-width="300px">
      <el-input size="mini"></el-input>
    </ws-query-form>

卡片

image.png

background: 背景顏色亭引；默認(rèn):rgba(255,255,255,1)
borderRadius：圓角; 默認(rèn)：8px 8px 0px 0px

<ws-card background="rgba(255,255,255,1)" border-radius="8px 8px 0px 0px">
      卡片
  </ws-card>

對話框組件

dialog.jpg

<ws-dialog
   :visible.sync="visible"
   @getData = "getData"
   :close-callback="close"
   :form-data="formData"
   :width="width"
   form-name="ws-batch-allocation"
   title="分配好友">
</ws-dialog>

<font color="red">*注：對話框組件僅為最外層彈框绎速，對話框內(nèi)的表單也是組件的形式嵌入，根據(jù)展示的表單不同焙蚓，只需修改對應(yīng)的form-data纹冤、form-name 、title屬性即可</font>

table組件

QQ圖片20190328152430.png

<ws-commonTable :tableData="tableData" :theadData="theadData" :operateData="operateData" :isShow="isShow" ></ws-commonTable>

*注：table組件調(diào)用時需要傳入表格內(nèi)容數(shù)據(jù)，表頭數(shù)據(jù)宏浩，操作按鈕數(shù)據(jù),判斷表格第一列復(fù)選框的顯示隱藏數(shù)據(jù)

operate對應(yīng)值 0：查看求妹， 1： 聊天記錄， 2：刪除佳窑， 3： 下載制恍， 4：編輯 （可在table組件中添加配置）

對話框表單組件

form.jpg

export default {
  // 批量分配好友
  name: 'batchAllocation',
  props: ['formData'],
  data () {
    return {
  // 需驗證的規(guī)則
      rules: {
        user: [{required: true, message: '請選擇或搜索要分配的客服', trigger: 'change'}]
      }
    }
  },
  methods: {
 // 表單數(shù)據(jù)向外拋出的方法，可在對話框組件內(nèi)接收 
    commit (form) {
      let isForm = false
      this.$refs.form.validate((valid) => {
        if (valid) {
          isForm = this.formData
        } else {
          isForm = false
        }
      })
      return isForm
    }
  }
}

<font color="red">*注：這里只列舉ws-batch-allocation的表單組件何吝，開發(fā)其他對話框表單組件請對應(yīng)下表關(guān)系</font>

1.批量分配好友 ws-batch-allocation

圖片1.png

2. 客戶分組 ws-customer-grouping

圖片2.png

3. 批量打標(biāo)簽 ws-batch-labeling

圖片3.png

4. 微信CRM列表中查看微信好友聊天記錄 ws-crm-chats

圖片4.png

5. 刪除 ws-delete

圖片5.png

6. 下載聊天記錄 ws-download-chats

圖片6.png

7. 店鋪好友列表單個數(shù)據(jù)加好友 ws-add-shopbuddies

圖片7.png

8. 微信群分配聊天群 ws-distribution-chatgroup

圖片8.png

9. 微信批量分組 ws- subgroup

圖片9.png

10. 選中一個記錄分配聊天群 ws-selected-record-allocation

圖片10.png

11. 選中一個記錄群聊分組 ws-choose-chatgroup

圖片11.png

12. 查看群成員 ws-view-group-members

圖片12.png

13. 聊天記錄里查看群或好友的聊天記錄 ws-view-chats

圖片13.png

14. 新增字段 ws-new-field

圖片14.png

15. 自定義編輯字段 ws-edit-field

圖片15.png

16. 客戶分組里新增微信分組 ws-new-chatgroup

圖片16.png

17. 微信列表里查看設(shè)備信息 ws-view-device-information

圖片17.png

18. 設(shè)置微信分組 ws-setting-chatgroup

圖片18.png

19. 微信列表查看微信號的聊天記錄 ws-view-icrosignals-chatrecord

圖片19.png

20. 查看朋友圈 ws-view-circle-of-friends

圖片20.png

21. 設(shè)置打招呼 ws-setting-notify

圖片21.png

22. 修改微信備注 ws-revise-remarks

圖片22.png

23. 新增分配規(guī)則 ws--new-allocation-rules

圖片23.png

24. 設(shè)置分配上限 ws-setting-distribution-toplimit

圖片24.png

25. 導(dǎo)入快捷語 ws-Introduce-shortcuts

圖片25.png

26. 清理僵尸粉 ws-clean-mbie-fan

圖片26.png

27. 查看僵尸粉詳情 ws-view-mbie-fan

圖片27.png

28. 店鋪授權(quán)第三方賬號 ws-authorization-platform

圖片28.png

29. 編輯店鋪名稱 ws-edit-shop-name

圖片29.png

30. 獲取新訂單 ws-get-new-orders

圖片30.png

31. 同步訂單數(shù)據(jù) ws-synchronize-order-data

圖片31.png

32. 考勤查看時間軸 ws-attendance-timeline

圖片32.png

33. 設(shè)置敏感操作 ws-setting-sensitive-operation

圖片33.png

34. 敏感操作處理 ws-sensitive-operation-deal

圖片34.png

35. 查看敏感操作詳情 ws-view-sensitive-operation

圖片35.png

36. 新增敏感詞 ws-new-sensitive-words

圖片36.png

37. 編輯敏感詞 ws-edit-sensitive-words

圖片37.png

38. 新增設(shè)備 ws-new-equipment

圖片38.png

39. 批量安裝app ws-batch-installation

圖片39.png

40. 設(shè)置手機分組 ws-setting-phone-grouping

圖片40.png

41. 手機設(shè)備分配用戶 ws-mobile-device-allocation

圖片41.png

42. 手機風(fēng)控權(quán)限 ws-wind-control-authority

圖片42.png

43. 手機可用app設(shè)置 ws-available-app-setting

圖片43.png

44. 聯(lián)系人導(dǎo)入 ws-contact-import

    
    
    圖片44.png

45. 同步歷史消息 ws-synchronizing-historical-messages

圖片45.png

46. 新增手機分組 ws-new-mobile-grouping

圖片46.png

47. 新增APP設(shè)置 ws-new-app-setting

圖片47.png

48. 分配設(shè)備 ws-distribution-equipment

圖片48.png

49. 新增反饋 ws-feedback

圖片49.png

50. 新增部門 ws-new-department

圖片50.png

51. 編輯部門 ws-edit-department

圖片51.png

52. 新增賬戶 ws-edit-account

圖片52.png

53. 設(shè)置賬戶權(quán)限 ws-setting-account-power

圖片53.png

54. 賬戶秘鑰 ws-account-secret-key

圖片54.png

55. 重置密碼 ws-reset-password

圖片55.png

56. 敏感通知 ws-sensitive-notification

圖片56.png

分頁組件

page.jpg

 <ws-pagination
    :current-page.sync="currentPage"
    :page-sizes="pageSizes"
    :page-size="pageSize"
    @handleCurrentChange="handleCurrentChange"
    :total="total"></ws-pagination>

按鈕組件

button.jpg

<ws-button @click="search" name="reset"></ws-button>
<ws-button @click="reset"></ws-button>

注: 如有疑問請反饋,簡書查看地址http://www.reibang.com/p/50aa0952f97d

最后修改時間:2019-3-28