时间戳

首页 > 解决方案 > 如何使用 nuxt 和 babel 生成 Web 组件？

javascript - 如何使用 nuxt 和 babel 生成 Web 组件？

问题描述

当我开始构建我的 nuxt js 项目时，我写道：

nuxt build or npm run build

执行的结果是包含 index.html 的 dist 文件夹

<html>

<head>
</head>

<body>
    <div id="__nuxt">
        <style>
        </style>
        <div class="sk-folding-cube">
            <div class="sk-cube1 sk-cube"></div>
            <div class="sk-cube3 sk-cube"></div>
        </div>
    </div>
    <script type="text/javascript" src="/_nuxt/d3be7369ce502214a6cb.js"></script>
   </body>
  </html>

我想知道他们是否有任何方法可以使用 babel 或其他方法为 nuxt js 项目生成 Web 组件https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements？

我在 nuxt 的 github 中只有这个资源，但它是旧的 https://github.com/nuxt/nuxt.js/issues/2478

标签： javascriptvue.jsnuxt.jsbabeljs

解决方案

我正在对该主题进行自己的研究，目前正在使用 nuxt-custom-elements ( https://github.com/GrabarzUndPartner/nuxt-custom-elements ) 构建原型。您可以直接从 nuxt.config.js 配置 Web 组件。在构建项目时，配置的组件会自动生成，并且可以从构建文件夹中提取或稍后直接在服务器端使用 nuxt 交付。

推荐阅读