自動化註冊組件，自動化註冊路由--懶人福利（vue，react皆適用）

開頭

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

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

我是一個react主義者，此次由於項目組關係必須用vue，做爲vue小白就記錄一下開發過程當中的一些騷想法。webpack

正文

1. 對於路由的操做

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

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

首先把vue本身的路由註釋掉數組

// const routes: Array<RouteConfig> = [
//   {
//     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的魔法註釋，支持懶加載markdown

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

咱們此次用到的API是require.context，你們可能覺得須要安裝什麼包，不用不用！這是webpack的東西！具體API的介紹你們能夠自行百度了ui

首先用這玩意去匹配對應規則的頁面，而後提早創好咱們的路由數組以便使用。this

const r = require.context("../views", true, /.vue/);
const routeArr: Array<RouteConfig> = [];
複製代碼

接下來就是進行遍歷啦，匹配了../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<RouteConfig> = [];
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 };
複製代碼

咱們一塊兒來看看調用結果吧

打印結果：

看到這個結果不難想象頁面的樣子吧！固然跟以前同樣啦！固然實現啦！

很是的完美！

最後

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

若是文內有錯誤，敬請你們幫我指出！（反正我也不必定改哈哈）

最後!謝謝！拜拜！