vue-cli/基础组件全局自动化注册/vuex/modules智能引入

基础组件自动化

• 利用 webpack的require.context

• webpack的require.context 可参考 [博文]：https://segmentfault.com/a/1190000019723837

• 基础组件需要满足命名规则 Basexxx

• 需要直接放在Components文件夹下

  目录结构

目前方法可以全局自动注册BaseCmp，无法自动注册BaseForm

新增以下代码到你的main.js

/**
 * main.js 新增
 *
 * 2021-2-1
 * Wallace Chan
 */
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context(
  // 其组件目录的相对路径
  './components',
  // 是否查询其子目录
  false,
  // 匹配基础组件文件名的正则表达式
  /Base[A-Z]\w+\.(vue|js)$/
)

requireComponent.keys().forEach(fileName => {
  // 获取组件配置
  const componentConfig = requireComponent(fileName)

  // 获取组件的 PascalCase 命名
  const componentName = upperFirst(
    camelCase(
      // 获取和目录深度无关的文件名
      fileName
        .split('/')
        .pop()
        .replace(/\.\w+$/, '')
    )
  )

BaseCmp组件直使用就不会报错咯，这样基础公共组件无需再反复引入和注册

<template>
  <div>
    <BaseCmp />
    <!--    <BaseForm />-->
  </div>
</template>

<script>
export default {
  name: 'CmpReg'
}
</script>

Vuex的modules智能引入

同样要符合常规目录结构

store/modules 下新建index.js

/**
 * store/modules/index.js
 *
 * 2021-2-2
 * Wallace Chan
 */
 
import camelCase from 'lodash/camelCase'
// Storing in variable a context with all files in this folder
// ending with `.js`.
const requireModule = require.context('.', false, /\.js$/)
const modules = {}

requireModule.keys().forEach(fileName => {
  if (fileName === './index.js') return
  // filter fullstops and extension
  // and return a camel-case name for the file
  const moduleName = camelCase(
    fileName.replace(/(\.\/|\.js)/g, '')
  )
  // create a dynamic object with all modules
  modules[moduleName] = {
    // add namespace here
    namespaced: true,
    ...requireModule(fileName).default
    // if you have exported the object with name in the module `js` file
    // e.g., export const name = {};
    // uncomment this line and comment the above
    // ...requireModule(fileName)[moduleName]
  }
})
export default modules

可以注释所有store/index.js里的所有module引入了！代码一下子清爽很多，并且无需修改module后再修改 store/index.js

/**
 * store/index.js
 *
 * 2021-2-2
 * Wallace Chan
 */

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import getters from './getters'

// import app from './modules/app'
// import settings from './modules/settings'
// import user from './modules/user'
// import menu from './modules/menu'
// import processData from './modules/processData'
// import battery from './modules/battery'
// import systemManage from '@/store/modules/systemManage/systemManage'
// import userManage from './modules/systemManage/userManage'

import modules from '@/store/modules'

Vue.use(Vuex)

const store = new Vuex.Store({
  plugins: [createPersistedState({
    storage: window.sessionStorage,
    reducer(val) {
      return {
        user: val.user
      }
    }
  })],
  modules,
  // modules: {
  //   app,
  //   settings,
  //   user,
  //   menu,
  //   processData,
  //   battery,
  //   userManage,
  //   systemManage
  // },
  getters
})

export default store

🔥🙇🔥来自大佬 Nikos Koikas：https://dev.to/nkoik/-vuex-pattern-smart-module-registration-15gc

🔥🙇🔥演讲地址：7 Secret Patterns Vue Consultants Don’t Want You to Know https://www.youtube.com/watch?v=7YZ5DwlLSt8&t=1047s

✍✍✍代码：https://gitee.com/hellocheng0903/vue-test-demo

尤雨溪身后的男人，不简单。虽然我英语挺烂，但是似乎他的演讲的确很生动有趣。

🚁🚅🚢 我们不生产代码，我们只是互联网的搬运工 📚