require.context
主要使用require.context实现前端工程化动态引入文件
require.context(directory, useSubdirectories = false, regExp = /^.//)
require.context 参数
- 目标文件夹
- 是否查找子集 true | false
- 正则匹配
比如:
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
}