一开始，我入职以来一直在做相关的入口任务，task1在上一篇文章中指出。这篇文章记录了我在task2中的奇思妙想。Task2是从0到1实现一个vue2+ts的项目，说实话，vue2+ts真的很难用。你有同样的感觉吗？.我是一个反应主义者。这次因为项目组的关系不得不用vue。作为一个vue新手，我会把开发过程中的一些想法记录下来。正文1.可能用过umi进行路由操作的同学都知道，umi有一套常规的路由系统。在开发过程中，可以避免每次写页面时都手动导入路由数组。您只需要遵循规则，路由就可以自动添加。完美，我们今天简单实现一个常规的路由功能。先注释掉vue自带的路由//constroutes:Array=[//{//path:"/login",//name:"login",//component:Login,//},////{////path:"/about",////name:"About",//////路由级代码拆分//////这会生成一个单独的块（about.[hash.js)forthisroute////在访问路由时延迟加载。////component:()=>////import(/*webpackChunkName:"about"*/"../views/About.vue"),////},//];可以看到代码很多，随着页数的增加会越来越多。当然vue的这种方式也有很多优点：比如支持webpack的魔术注解，支持懒加载，然后实现我们的常规路由！我们这次使用的API是require.context。你可能认为你需要安装一些包，不需要！这是webpack的东西！具体API的介绍可以自行百度。先用这个东西去匹配对应规则的页面，然后提前创建好我们的路由数组以供使用。constr=require.context("../views",true,/.vue/);constrouteArr:Array=[];接下来就是遍历，匹配../views文件下的页面，遍历匹配结果，如果是按照我们的规则创建的页面，就加入到路由数组中。比如我现在的views文件夹是这样的//遍历r.keys().forEach((key)=>{console.log(key)//这里的匹配结果是./login/index.vue./product/index.vueconstkeyArr=key.split(".");if(key.indexOf("index")>-1){//常规路由组合方案，views文件夹下的index.vue文件会自动生成routing//但是我不想在routing里面有索引，我只想要login，product，所以我修改了path//这个其实有很大的优化空间，大家可以尝试使用正则表达式来constpathArr=keyArr[1].split("/");routeArr.push({name:pathArr[1],path:"/"+pathArr[1],组件:r(key).default,//这是组件});}});来看看自动匹配的路由数组长什么样子完美的满足了我们的需求。去页面看看吧！完美实现！最后，发送所有代码。这样就实现了常规的自动注册路由，免去了手动添加的麻烦，懒人必须importvuefrom"vue";importVueRouter,{RouteConfig}from"vue-router";constr=require.context("../views",true,/.vue/);constrouteArr:Array=[];r.keys().forEach((key)=>{constkeyArr=key.split(".");if(key.indexOf("index")>-1){//常规路由组合方案，views文件夹下的index.vue文件会自动生成路由constpathArr=keyArr[1].split("/");routeArr.push({name:pathArr[1],path:"/"+pathArr[1],component:r(key).default,//这是组件});}});Vue.use(VueRouter);constrouter=newVueRouter({mode:"history",base:process.env.BASE_URL,routes:routeArr,});导出默认路由器；2、经过上一章的组件操作，我们就可以写页面了，然后再写组件。我发现每次用到一个组件，都得在我用的页面上导入，很麻烦。通过上一章的思路，我们是不是也可以自动导入组件呢？我的想法是：用一种方法统一管理components文件下的所有组件。需要的页面可以通过该方法传入对应的规则，统一返回组件。该方法可以手动导入，也可以全局挂载。先给大家看看我的components文件夹，再看看当前页面看起来还可以吧。让我们开始在index.ts中编写代码。首先，第一步是相同的匹配。这里我们只需要匹配当前文件夹下的所有vue文件即可。constr=require.context("./",true,/.vue/);然后声明一个方法，这个方法可以让fn('rule')返回对应的组件，代码如下。functiongetComponent(...names:string[]):any{constcomponentObj:any={};r.keys().forEach((key)=>{constname=key.replace(/(\.\/|\.vue)/g,"");if(names.includes(name)){componentObj[名称]=r(key).default;}});返回componentObj;}export{getComponent};让我们一起来看看调用的结果。打印结果：不难想象看到这个结果后页面的样子！当然和以前一样啊！当然有！非常完美！最后因为项目比较紧急，自己还有一些想法，没时间整理查资料实现。先这样吧~如果文中有错误，请大家帮我指出！（反正我不一定改哈哈）终于！谢谢！再见！
