项目中常用的方法

93 阅读1分钟

require.context(directory,useSubdirectories,regExp)

  • directory:表示检索的目录
  • useSubdirectories:表示是否检索子文件夹
  • regExp:匹配文件的正则表达式,一般是文件名。例如 require.context("@/views/components",false,/.vue$/)

该函数的返回值有三个属性

  • resolve {Function} -接受一个参数request,request为test文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径
  • keys {Function} -返回匹配成功模块的名字组成的数组
  • id{String} -是上下文模块里面所包含的模块 id. 它可能在你使用 module.hot.accept 的时候被用到

1、常常用来在组件内引入多个组件。

const path = require('path')
const files = require.context('@/components/home', false, /\.vue$/)
const modules = {}
files.keys().forEach(key => {
  const name = path.basename(key, '.vue')
  modules[name] = files(key).default || files(key)
})
export default{
    ...
    components:modules
}

2、在main.js中引入大量公共组件

import Vue from 'vue'
// 自定义组件
const requireComponents = require.context('../views/components', true, /\.vue/)
// 打印结果
// 遍历出每个组件的路径
requireComponents.keys().forEach(fileName => {
  // 组件实例
  const reqCom = requireComponents(fileName)
  // 截取路径作为组件名
  const reqComName =reqCom.name|| fileName.replace(/\.\/(.*)\.vue/,'$1')
  // 组件挂载
  Vue.component(reqComName, reqCom.default || reqCom)
})

reduce

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

参数(前4个是函数形参)

参数描述
total必需。初始值, 或者计算结束后的返回值
currentValue必需。当前元素
currentIndex可选。当前元素的索引
arr可选。当前元素所属的数组对象
initialValue可选。传递给函数的初始值

Store的批量import

const modulesFiles = require.context('./modules', false, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {

// 忽略第1个js
const moduleName = modulePath.replace(/^./(.*).\w+$/, ‘$1’)

// 执行modulesFiles函数,返回一个对象{default: {// 文件内容}, _esModule: true}
const value = modulesFiles(modulePath)

modules[moduleName] = value.default
// 要有返回值作为下一次计算的初始值,因为这次是对象的赋值,所以直接返回对象就行
return modules
}, {})

const store = new Vuex.Store({undefined
    modules,
    getters
})

export default store