Блог

В настоящее время я работаю над веб-компонентами и теневым DOM. Я вижу, что можно создать собственный веб-компонент с помощью Vue3 здесь Vue docs. Но в настоящее время я сталкиваюсь с проблемами при создании собственного файла компонента из файлов vuejs. Я некоторое время гуглил и обнаружил, что для этого не так много полезного контента.

Создание веб — компонентов с помощью Vue 3.2-это, безусловно, самый полезный блог, который я нашел. Тем не менее, я не могу выполнить производственную сборку своих файлов.

В настоящее время я получаю 2 файла после сборки.

 import {
  r as c,
  c as l,
  o as a,
  a as u,
  b as d,
  d as f,
  t as m,
  u as p,
  e as g,
} from "./vendor.21fe8919.js";
const y = function () {
  const r = document.createElement("link").relList;
  if (r amp;amp; r.supports amp;amp; r.supports("modulepreload")) return;
  for (const e of document.querySelectorAll('link[rel="modulepreload"]')) o(e);
  new MutationObserver((e) => {
    for (const t of e)
      if (t.type === "childList")
        for (const s of t.addedNodes)
          s.tagName === "LINK" amp;amp; s.rel === "modulepreload" amp;amp; o(s);
  }).observe(document, { childList: !0, subtree: !0 });
  function i(e) {
    const t = {};
    return (
      e.integrity amp;amp; (t.integrity = e.integrity),
      e.referrerpolicy amp;amp; (t.referrerPolicy = e.referrerpolicy),
      e.crossorigin === "use-credentials"
        ? (t.credentials = "include")
        : e.crossorigin === "anonymous"
        ? (t.credentials = "omit")
        : (t.credentials = "same-origin"),
      t
    );
  }
  function o(e) {
    if (e.ep) return;
    e.ep = !0;
    const t = i(e);
    fetch(e.href, t);
  }
};
y();
const h = {
    props: { timeZone: { type: String, default: "America/Los_Angeles" } },
    emits: ["datechange"],
    setup(n, { emit: r }) {
      const i = n,
        o = c(new Date()),
        e = l(() => o.value.toLocaleString("en-US", { timeZone: i.timeZone }));
      return (
        setInterval(() => {
          (o.value = new Date()), r("datechange", e);
        }, 1e3),
        (t, s) => (
          a(), u("div", null, [d(t.$slots, "prefix"), f(" "   m(p(e)), 1)])
        )
      );
    },
  },
  v = g(h);
customElements.define("current-time", v);
document.querySelector("current-time").addEventListener("datechange", L);
function L(n) {
  console.log(n.detail[0].value);
}

 

Но я хотел бы, чтобы файл сборки был в следующем формате для моего варианта использования.

 class CurrentTime extends HTMLElement {
  connectedCallback() {
    this.innerHTML = new Date();

    setInterval(() => this.innerHTML = new Date(), 1000)
  }
}

// Define it as a custom element
customElements.define('current-time', CurrentTime);
 

файл конфигурации vite

 import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue({ customElement: true })],
});