vue2前端工程化动态引入文件(require.context) vue全局注册组件 vue router 模块化 vuex

require.context

主要使用require.context实现前端工程化动态引入文件

require.context(directory, useSubdirectories = false, regExp = /^.//)

require.context 参数

1. 目标文件夹
2. 是否查找子集 true | false
3. 正则匹配

比如：

require.context('./router',true,/\.routes\.js/)

可以理解为获取router文件下以.routes.js结尾的文件，知道这个以后，就可以在项目动态引入文件，方便使用了

vue全局注册组件

在项目中，我们都会针对项目的功能，将项目中高频出现的部分写成组件方便调用，这个时候可以使用require.context完成组件注册，省去在每个页面进行import的工作
比如：我们把组件全部写在components文件夹下，然后创建componentRegister.js使用require.context进行组件注册

function changStr(str){
    return str.charAt(0).toUpperCase()+str.slice(1)  
}
export default {
    install(Vue) {
        const requireAll=require.context("./components",false,/\.vue$/)
        requireAll.keys().forEach((item)=>{
            Vue.component(changStr(item.replace(/\.\//,'').replace(/\.vue$/,'')),requireAll(item).default)
        })
    }
}

然后只要在main.js里引入这个js文件，然后vue.use()注册就可以在所有页面调用组件了
比如在components下创建了HelloWorld.vue组件，在页面中只需要这样就可以使用了

vue路由模块化

vue router 目录结构

vue router 的 index.ts 文件内容

import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes: RouteConfig[] = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]
// 使用 require.context 动态加载modules文件的 router 模块
const requiredModules = require.context('./modules', false, /\.ts$/)
requiredModules.keys().forEach(fileName => {
  routes.push(...(requiredModules(fileName).default || requiredModules(fileName)))
})

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

vue router 的 app.ts 文件内容

const OrderRouter = [
  {
    path: 'orderList',
    component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue')
  },
  {
    path: 'orderDetail',
    component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue')
  }
]
export default OrderRouter

这样就可以在routes下面按模块管理路由了，不管加入什么，只需要在routes下新建就可以了

vuex路由模块化

vuex 目录结构

vuex 的 index.ts 文件内容

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 使用 require.context 动态引入 vuex modules
const modulesFiles = require.context('./modules', true, /\.ts$/)
const modules = modulesFiles.keys().reduce((module: any, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  module[moduleName] = value.default
  return module
}, {})

export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules
})

vuex 的 app.ts 文件内容

const state = {
  useName: 'sam'
}
const mutations = {
  change_name(state, anotherName) {
    state.useName = anotherName
  }
}
const actions = {
  changeName({ commit, rootState }, anotherName) {
    if (rootState.job == 'web') {
      commit('change_name', anotherName)
    }
  },
  alertName({ state }) {
    alert(state.useName)
  }
}
const getters = {
  localJobTitle(state, getters, rootState, rootGetters) {
    return rootGetters.jobTitle + ' aka ' + rootState.job
  }
}
// namespaced 属性，限定命名空间
export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}

gitee项目代码

参考链接