{"id":269,"date":"2023-06-07T17:12:22","date_gmt":"2023-06-07T09:12:22","guid":{"rendered":"https:\/\/yichenghui.net\/?p=269"},"modified":"2023-06-07T17:44:12","modified_gmt":"2023-06-07T09:44:12","slug":"%e7%bc%96%e5%86%99%e4%b8%80%e4%b8%aavue-web-components","status":"publish","type":"post","link":"https:\/\/yichenghui.net\/index.php\/2023\/06\/07\/%e7%bc%96%e5%86%99%e4%b8%80%e4%b8%aavue-web-components\/","title":{"rendered":"\u7f16\u5199\u4e00\u4e2aVue Web Components"},"content":{"rendered":"

\u4ec0\u4e48\u662fWeb Components<\/h2>\n
\n

\u517c\u5bb9\u6027\u63d0\u793a
\nWeb Components \u6a21\u5f0f\u4e0d\u652f\u6301 IE11 \u53ca\u66f4\u4f4e\u7248\u672c\u3002\u66f4\u591a\u7ec6\u8282<\/a><\/p>\n

\u6ce8\u610f\u5bf9 Vue \u7684\u4f9d\u8d56
\n\u5728 Web Components \u6a21\u5f0f\u4e2d\uff0cVue \u662f\u5916\u7f6e\u7684\u3002\u8fd9\u610f\u5473\u7740\u5305\u4e2d\u4e0d\u4f1a\u6709 Vue\uff0c\u5373\u4fbf\u4f60\u5728\u4ee3\u7801\u4e2d\u5bfc\u5165\u4e86 Vue\u3002\u8fd9\u91cc\u7684\u5305\u4f1a\u5047\u8bbe\u5728\u9875\u9762\u4e2d\u5df2\u7ecf\u6709\u4e00\u4e2a\u53ef\u7528\u7684\u5168\u5c40\u53d8\u91cf Vue<\/code><\/code>\u3002<\/p>\n<\/blockquote>\n

\u4f7f\u7528vue-cli\u6784\u5efa\u5f02\u6b65Web components<\/h2>\n
vue-cli-service build --target wc-async --name foo 'src\/components\/*.vue'<\/code><\/pre>\n
\u5bf9package.json\u4e2d\u7684script\u8fdb\u884c\u6539\u9020\uff0c\u6dfb\u52a0\u4e00\u4e2abuild:test<\/code><\/code>\u547d\u4ee4<\/p>\n
  "scripts": {\n    "serve": "vue-cli-service serve",\n    "build": "vue-cli-service build",\n    "build:test": "vue-cli-service build --target wc-async --name hello-World src\/components\/HelloWorld.vue"\n  },<\/code><\/pre>\n
\u8fd0\u884c\u811a\u672c<\/p>\n
npm run build:test<\/code><\/pre>\n
\u8fd0\u884c\u7ed3\u679c\u5982\u4e0b:  <\/p>\n
dist\u76ee\u5f55\u4e0b\u5c06\u4f1a\u751f\u6210hello-World<\/code><\/code>\u76f8\u5173\u4ee3\u7801  <\/p>\n
\"\u8fd0\u884c\u7ed3\u679c\"<\/p>\n
\u5f15\u7528Web components<\/h2>\n
\u5c06\u751f\u6210\u7684hello-World.js<\/code><\/code>\u653e\u5230http\u670d\u52a1\u76ee\u5f55\u4e0b  <\/p>\n
\u4f7f\u7528script\u6807\u7b7e\u52a0\u8f7d<\/p>\n
<template>\n  <div id="app">\n    <img alt="Vue logo" src=".\/assets\/logo.png">\n    <div v-if="componentName">\n      <component :is="componentName" msg="\u8fd9\u662f\u4e00\u4e2a\u5f02\u6b65\u7ec4\u4ef63" \/>\n    <\/div>\n  <\/div>\n<\/template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      componentName: "",\n    }\n  },\n  created() {\n    this.initComponents()\n  },\n  methods: {\n    initComponents() {\n      if (!customElements.get('hello-world')) {\n        const script = document.createElement("script");\n        script.setAttribute("src", "http:\/\/localhost:3333\/component");\n        document.body.appendChild(script);\n      }\n\n      window.customElements.whenDefined("hello-world").then(res => {\n        this.componentName = 'hello-world'\n      })\n    }\n  }\n}\n<\/script>\n<\/code><\/pre>\n
\u8fd0\u884c\u6548\u679c
\n\"\u8fd0\u884c\u6548\u679c\"<\/p>\n","protected":false},"excerpt":{"rendered":"
\u4ec0\u4e48\u662fWeb Components \u517c\u5bb9\u6027\u63d0\u793a Web Components \u6a21\u5f0f\u4e0d\u652f\u6301 IE11 \u53ca\u66f4\u4f4e\u7248\u672c … <\/p>\n
\u7ee7\u7eed\u9605\u8bfb\u201c\u7f16\u5199\u4e00\u4e2aVue Web Components\u201d<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kadence_starter_templates_imported_post":false,"footnotes":""},"categories":[4],"tags":[],"class_list":["post-269","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/posts\/269","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/comments?post=269"}],"version-history":[{"count":0,"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/posts\/269\/revisions"}],"wp:attachment":[{"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/media?parent=269"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/categories?post=269"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/yichenghui.net\/index.php\/wp-json\/wp\/v2\/tags?post=269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}