Nuxt 魔法揭秘:打造专属模块，轻松引入自制组件库前情 前端时间不是自己开发了一个 组件库 JANUS-UI 嘛，然后

前情

前端时间不是自己开发了一个 组件库 JANUS-UI 嘛，然后想在自己的 博客网站 中使用这个组件库，在单页面中的引入没啥问题，但其中博客的文章详情页面是用 nuxt 框架搭建，服务端渲染 ssr 。按照默认的引入方式，报错不生效。于是就来剖析原因。

报错路径复现

我在nuxt项目中正常的安装组件库的依赖，并在配置文件中引入依赖

pnpm i janus-ui

// nuxt.config.ts
modules: ['janus-ui']

运行之后报错了

Cannot start nuxt: Nuxt module should be a function: [object Module]

大致意思就是Nuxt期望模块导出一个函数，但是实际上接收到了一个[object Module]对象。这通常是因为模块导出不正确或者模块路径错误。

然后看看我们组件库的默认导出的是一个有install方法的对象，大致框架如下

export {
    install: () => {
    }
}

那这样确实不太对😂😂😂，nuxt解析不了组件库怎么办？又怎样将其转变为nuxt可以识别的模块？

在网上找了关于nuxt模块的开发，没有找到什么例子，在没有头绪的时候，突然想到可以参考一下其他现有的ui组件库又是怎么样支持nuxt的呢？像 element Plus 这种肯定适配了 nuxt ，只需要看一下他们是怎么写的，套用一下。😎😎

果然皇天不负有心人，被我找到了 @element-plus/nuxt，我们赶紧来看看其打包产物 /dist/module.mjs 的代码。

不看不知道，一看吓一跳，代码四百多行。

大部分小白的反应：代码好多，看着就头晕，看不懂，到这就停滞了。不用怕，我来帮大家从中提取精华。

我们一般遇到这些很长的代码，直接折叠起来，看 export 出去的内容

上面其实就是element导出nuxt module最 主要 的内容了，因为我们的ui没有集成很多功能，我们只需要两个重要的部分就是 样式 和 组件。

实践

先安装依赖 @nuxt/kit，其提供了hook方法供我们与 nuxt 实现交互

pnpm i @nuxt/kit

再创建一个js文件，写入基础框架代码

import { createResolver, addComponent, useNuxt, defineNuxtModule } from '@nuxt/kit';

export default defineNuxtModule({
  meta: {
    name: 'janus-ui',
    configKey: "janusUI",
    compatibility: {
      nuxt: ">=3"
    }
  },
  async setup(_options, nuxt) {
    // 解析样式
    // 解析组件
  }
});

meta就是一些基础配置，重点在 setup 中，nuxt 在解析 module 时会执行 setup。

css解析

我们先来解析样式

async setup(_options, nuxt) {
    const nuxt = useNuxt();
    nuxt.options.css.push(`${libraryName}/theme-chalk/index.css`);
}

其实也很简单，就是往nuxt的css配置引入组件库的样式文件

组件解析

我们再来解析组件，首先需要引入组件依赖，然后添加所有组件

import * as AllComponents from 'janus-ui';
async setup(_options, nuxt) {
    // 组件解析
    Object.entries(AllComponents).forEach(async ([key, item]: any) => {
      const regExp = /^Ja[A-Z]\w+/;
      if (regExp.test(key)) {
        addComponent({
          name: key,
          export: key,
          filePath: await resolvePath(`${libraryName}/es/components/${key}/index.mjs`),
        })
      }
    })
}

就是遍历组件list，如果list中是组件库的组件则添加进去。

大功告成！！！

在nuxt项目中需要使用的话，可以将写的 nuxt module 打包发布到npm，然后在项目中安装使用即可

总结

要在 nuxt 框架中使用组件库，需要写一个 nuxt 的 module 模块来解析组件库，其作用主要就是让nuxt解析并使用组件，其原理跟组件的 install 没什么太大区别，就是包了一层 nuxt 独有识别模块代码