d2-admin中那些不錯的技巧

d2-admin基於vue-cli3

路由相關

刷新路由，參照官方  組件內的守衛 可是搞不明白爲什麼加了句 render:h => h()

 {
        path: 'refresh',
        name: 'refresh',
        hidden: true,
        component: {
          beforeRouteEnter (to, from, next) {
            next(vm => vm.$router.replace(from.fullPath))
          },
          render: h => h()
        }
      }

嵌套路由能夠是一個當即執行函數

children: (pre => [
        { path: 'page1', name: `${pre}page1`, component: () => import ('@/pages/demo/page1'), meta: {...meta, title: '頁面 1' } },
        { path: 'page2', name: `${pre}page2`, component: () => import ('@/pages/demo/page2'), meta: {...meta, title: '頁面 2' } },
        { path: 'page3', name: `${pre}page3`, component: () => import ('@/pages/demo/page3'), meta: {...meta, title: '頁面 3' } },
        { path: 'page4', name: `${pre}page4`, component: () => import ('@/pages/demo/page4'), meta: {...meta, title: '頁面 444444' } }
    ])('demo-')

 

MOCK數據

安裝mock數據：

 在vue.config.js中，根據自定義的環境變量，來判斷是否安裝，默認.env文件，沒有這個環境變量，則開發時，會加入模擬數據

module.exports = {
    chainWebpack: config => {
        const entry = config.entry('app')
        if (process.env.VUE_APP_BUILD_MODE !== 'nomock') {
            entry
                .add('@/mock')
                .end()
        }
    }
}

關於config.entry請查看 使用 Webpack-chain 鏈式生成 webpack 配法
新建一個擴展環境變量文件：.env.nomock

# 指定構建模式
NODE_ENV=production

# 標記當前是 No Mock 構建
VUE_APP_BUILD_MODE=nomock

新建一個npm script，"build:nomock": "vue-cli-service build --mode nomock"
則運行這個命令來打包的時候，不會加入mock數據

mock安裝結構

根據上面vue.config.js中的設置，在根目錄創建mock目錄

主目錄index.js:

import d2Mock from './d2-mock'

const req = context => context.keys().map(context)
const options = req(require.context('./api/', true, /\.js$/))
  .filter(e => e.default)
  .map(e => e.default)

options.forEach(option => {
  d2Mock.load(option)
})

 使用webpack 的require.context 引入api目錄中的mock數據文件, 而且獲得全部默認的導出，返回新的數組
而後使用封閉好d2Mock工具來加載並安裝mock數據

api目錄中的文件
這裏面爲每一個獨立的url攔截，文件名可獨立命名，代碼示例：

export default [
    {
        path: '/api/getMockData',
        method: 'get',
        handle:  {
            "code":0,
            "msg":"正常",
            "count":300,
            "data|20":[
                {
                    "tid":"@string(abcdefghijklmnopqrstuvwxyz1234567890, 30,30 )",
                    "wxunionid":"@string(abcdefghijklmnopqrstuvwxyz1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ_, 28,28 )",
                    "timg":"@image('200x200')",
                    "eimg":"@image('400x400')",
                    "remark":"@cparagraph()",
                    "pay_date":"@datetime('yyyy-MM-dd')",
                    "title|3":"@ctitle",
                    "eid|1-10":0,
                    "totalFee|200-500":0,
                    "count|1-10":0,
                    "tbegin":"@datetime('yyyy-MM-dd')",
                    "tend":"@datetime('yyyy-MM-dd')",
                    "tstatus|1-4": 0
                }
            ]
            }
        
    }
]

直接使用mock.js的隨機數據語法，注意，這裏的get或post不能使用大寫，不然無效

d2-mock目錄
這裏是d2-admin官方擴展的mock安裝處理工具，先不去研究它在寫什麼，能用就好
d2-mock/index.js:

import Mock from 'mockjs'
import qs from 'qs'
import withCredentials from './patch/withCredentials'

/* 補丁 */
withCredentials(Mock)

/* Mock 默認配置 */
Mock.setup({ timeout: '200-300' })

/* 擴展 [生成器] */
const Generator = (prop, template) => {
  const obj = {}
  obj[prop] = [template]
  return Mock.mock(obj)
}

/* 擴展 [循環] */
const Repeat = (num, itemTemplate) => Generator(`data|${num}`, itemTemplate).data

const CustomExtends = {
  Generator,
  Repeat,
  Mock,
  Random: Mock.Random
}

const extend = (prop, value) => {
  CustomExtends[prop] = value
}

/* 裝配配置組 */
const wired = ({ url, type, body }) => ({
  method: type,
  params: qs.parse(url.split('?').length > 1 ? url.split('?')[1] : ''),
  body: JSON.parse(body),
  url: qs.parse(url.split('?')[0]),
  ...CustomExtends
})
const setup = (path, method, handle) => {
  Mock.mock(
    RegExp(path),
    method,
    typeof handle === 'function' ? o => handle(wired(o)) : handle
  )
}
const load = (collection) => {
  collection.map(({ path, method, handle }) => {
    if (method === '*') {
      method = [
        'get',
        'GET',
        'head',
        'post',
        'POST',
        'put',
        'delete',
        'connect',
        'options',
        'trace',
        'patch'
      ]
    }
    //下面的判斷應該是用於同一個api路徑使用了多種方法，好比 ['post','get'] ,或 'post|get' if (typeof method === 'string' && method.indexOf('|') > -1) method = method.split('|')
    if (method instanceof Array) {
      method.map(item => setup(path, item, handle))
    } else {
      setup(path, method, handle)
    }
  })
}
export default { setup, load, extend }

這個文件中導出了一個對象，裏面有3個方法, 試了一下，實際在mock/index.js中，只用到了load,用來加載mock詳情，setup和extend並沒在外部用到。

最後執行的是setup方法，使用了mock.js的mock方法來安裝，可參見官方說明

d2-mock/patch/withCredentials.js
這裏一個補丁文件，用於修復mock請求時丟失cookes的問題，反正，也不知道在寫什麼。。

export default function (Mock) {
  // http://cnine.me/note/FrontEnd/mock-lose-cookies-dbg.html
  Mock.XHR.prototype.__send = Mock.XHR.prototype.send
  Mock.XHR.prototype.send = function () {
    if (this.custom.xhr) this.custom.xhr.withCredentials = this.withCredentials || false
    this.__send.apply(this, arguments)
  }
}

 

全局使用less\sass變量

這個屬於vue-cli3的配置，官方地址

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      // 給 sass-loader 傳遞選項
      sass: {
        // @/ 是 src/ 的別名
        // 因此這裏假設你有 `src/variables.scss` 這個文件
        data: `@import "@/variables.scss";`
      }
    }
  }
}