早期右边博文专门讲了下require.context的用法和简单用法介绍《用webpack的require.context() 简化你的代码》
这次说点自己在vue项目中的具体应用吧

store
首先看我的store的目录结构:


这里的每个文件夹都是一个module,所以在store/index.js里面可以这样写

import Vue from 'vue';
import Vuex from 'vuex';
import Axios from './axios';
import Api from './api';

const modules = {};
// 只匹配子文件夹的index.js  ./brand/index.js
const files = require.context("./", true, /^\.\/(\w*\/)+index\.js$/);
files.keys().forEach(file => {
  const moduleName = file.replace(/(^\.\/)|(\/index\.js$)/g, "");
  modules[moduleName] = files(file).default || files(file);
});

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    Api,
    Axios,
  },
  modules,
})

router
目录结构:

哈哈,一样的套路。
需求:

  1. 访问/brand路径就是使用/brand/index.vue
  2. 访问/brandUpdate路径就是使用/brand/update.vue,并且它是/brand的子路由(不要问我为什么)
  3. 访问/test路径就是使用/test.vue文件

简单说明下: 访问/xxx时,如果有叫xxx的文件夹,就直接用xxx文件下面的index.vue,如果没有就直接用xxx.vue;访问/xxx/yyy就是使用xxx文件夹下面的yyy.vue;记得改成驼峰命名

import Vue from 'vue'
import Router from 'vue-router'

const files = require.context("./views", true, /^.\/(\w+\/)?\w+.vue$/, 'lazy');
const routerItem = (name, modules = {}) => {
  let [dot, parent, child] = name.split('/');
  parent = parent && parent.replace(/.vue$/, '');
  child = child && child.replace(/.vue$/, '');

  if(!modules[parent]) {
    const finalName = child ? `./${parent}/index.vue` : `./${parent}.vue`;
    modules[parent] = {
      path: '/' + parent,
      name: parent,
      component: () => Vue.component(parent, files(finalName))
    };
  }
  if(child && child !== 'index') {
    const fullName = parent + child.charAt().toUpperCase() + child.slice(1);
    (modules[parent].children || (modules[parent].children = [])).push({
      path: "/" + fullName,
      name: fullName,
      component: () => Vue.component(fullName, files(name))
    });
  }
};

const modules = ( (modules) => {
  files.keys().map(file => {
    routerItem(file, modules);
  });
  return Object.keys(modules).map(item => modules[item]);
})({});

Vue.use(Router);

export default new Router({
  mode: "history",
  routes: [
    ...modules,
  ]
});

当然还有其它地方可以使用require.context简化我们代码,做好工程化,这里只是抛砖引玉。


发表评论

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据