開頭

本菜雞自從入職以來，一直在做相關的entry task，task1在上一篇文章中指出。此篇文章記錄一下我在task2中的奇思妙想。

task2是從0到1實現一個vue2+ts的項目，說實話vue2+ts真的是難用，有沒有同感的。。

我是一個react主義者，這次因為項目組關系必須用vue，作為vue小白就記錄一下開發過程中的一些騷想法。

正文

1. 對于路由的操作

可能用過umi的同學知道，umi有一套約定式路由的系統，開發過程中可以避免每寫一個頁面就去手動import到路由的數組中，你只需要按照規則，就可以自動化的添加路由。

完美，我們今天就簡單實現一個約定式路由的功能。

首先把vue自己的路由注釋掉

// const routes: Array = [// {// path: "/login",// name: "login",// component: Login,// },// // {// // 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"),// // },// ];

可以看到代碼非常的多，隨著頁面的增加也會越來越多。當然vue的這種方式也有很多好處：比如支持webpack的魔法注釋，支持懶加載

接下來就去實現我們的約定式路由吧！

我們這次用到的API是require.context，大家可能以為需要安裝什么包，不用不用！這是webpack的東西！具體API的介紹大家可以自行百度了

首先用這玩意去匹配對應規則的頁面，然后提前創好我們的路由數組以便使用。

const r = require.context("../views", true, /.vue/);const routeArr: Array = [];

接下來就是進行遍歷啦，匹配了../views文件下的頁面，遍歷匹配結果，如果是按照我們的規則創建的頁面就去添加到路由數組中

比如我現在的views文件夾里是這樣的

// 遍歷r.keys().forEach((key) => { console.log(key) //這里的匹配結果就是 ./login/index.vue ./product/index.vue const keyArr = key.split("."); if (key.indexOf("index") > -1) { // 約定式路由構成方案，views文件夾下的index.vue文件都會自動化生成路由 // 但是我不想在路由中出現index，我只想要login，product，于是對path進行改造。 // 這部其實是有很多優化空間的。大家可以自己試著用正則去提取 const pathArr = keyArr[1].split("/"); routeArr.push({ name: pathArr[1], path: "/" + pathArr[1], component: r(key).default, // 這是組件 }); }});

一起來看一下自動匹配出來的路由數組是什么模樣

完美達成了我們的需求。去頁面看一看！

完美實現！ 最后把全部代碼送上。這樣就實現了約定式自動注冊路由，避免了手動添加的煩惱，懶人必備

import Vue from "vue";import VueRouter, { RouteConfig } from "vue-router";const r = require.context("../views", true, /.vue/);const routeArr: Array = [];r.keys().forEach((key) => { const keyArr = key.split("."); if (key.indexOf("index") > -1) { // 約定式路由構成方案，views文件夾下的index.vue文件都會自動化生成路由 const pathArr = keyArr[1].split("/"); routeArr.push({ name: pathArr[1], path: "/" + pathArr[1], component: r(key).default, // 這是組件 }); }});Vue.use(VueRouter);const router = new VueRouter({ mode: "history", base: process.env.BASE_URL, routes: routeArr,});export default router;

2.組件

經過上一章的操作，我們可以寫頁面了，然后就寫到了組件。我發現每次使用組件都要在使用的頁面去import，非常的麻煩。

通過上一章的想法，我們是不是也可以自動化導入組件呢？

我的想法是：

通過一個方法把components文件下的所有組件進行統一的管理

需要的頁面可以用這個方法傳入對應的規則，統一返回組件

這個方法可以手動導入，也可以全局掛載。

先給大家看一下我的components文件夾

再看一下現在的頁面長相

ok。我們開始在index.ts里擼代碼吧

首先第一步一樣的去匹配，這里只需要匹配當前文件夾下的所有vue文件

const r = require.context("./", true, /.vue/);

然后聲明一個方法，這個方法可以做到fn('規則')返回對應的組件，代碼如下。

function getComponent(...names: string[]): any { const componentObj: any = {}; r.keys().forEach((key) => { const name = key.replace(/(\.\/|\.vue)/g, ""); if (names.includes(name)) { componentObj[name] = r(key).default; } }); return componentObj;}export { getComponent };

我們一起來看看調用結果吧

打印結果：

看到這個結果不難想象頁面的樣子吧！ 當然跟之前一樣啦！當然實現啦！

非常的完美！

最后

由于項目比較急咯，我還有一些騷想法沒有時間去整理去查資料實現，暫時先這樣吧~

如果文內有錯誤，敬請大家幫我指出！