道招

用webpack的require.context优化vue store和router文件

如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!

用webpack的require.context优化vue store和router文件

早期右边博文专门讲了下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简化我们代码,做好工程化,这里只是抛砖引玉。

更新时间:
上一篇:vue里面使用debounce,throttle注意点下一篇:用div+css模拟类excel表格对角线(斜线)

相关文章

webpack笔记——hook执行时call的是什么

我们一般使用的插件都是Hook子类,比如SyncHook,没有复杂的重写基类Hook的compile方法 先看Hook基类 // node_module/tapable/Hook.js cla 阅读更多…

从vuecli3学习webpack记录(三)基类Tapable和Hook分析

在查看webpack(及插件)源码的过程中,我们会经常看到类似这样的代码 compiler.hooks.done.tap('vue-cli-service serve',( 阅读更多…

怎么调试Webpack+React项目,报错basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")怎么办

今天在WebStorm上Windows上准备调试一个React项目,就出现了这样的报错。 Node Parameters里面写的是webpack-dev-server的执行文件 .\node_mod 阅读更多…

回顾下跨域解决方案http-proxy-middleware

我们在React(或Vue)项目本地开发过程中很容易由前端自己解决跨域问题,这里面就用到的是插件 http-proxy-middleware ,它并不是webpack独享的插件,而是一个通用插件,它 阅读更多…

webpack笔记——在html-webpack-plugin插件中提供给其它插件是使用的hooks

最近在这段时间刚好在温故下webpack源码,webpack5都出来了,4还不再学习下? 这次顺便学习下webpack的常用插件html-webpack-plugin。 发现这个插件里面还额外加入了 阅读更多…

从vuecli3学习webpack记录(二)webpack分析

上一篇里面讲到运行 npm run serve 时运行的是 serveice.run(comand, args, rawArgv) 并且提到它提示返回的是一个promise,所以后面还接着 .cat 阅读更多…

关注道招网公众帐号
友情链接
消息推送
道招网关注互联网,分享IT资讯,前沿科技、编程技术,是否允许文章更新后推送通知消息。
允许
不用了