时间戳

首页 > 解决方案 > 汇总生成的 vue 组件未作为自定义 vue 标签调用

vue.js - 汇总生成的 vue 组件未作为自定义 vue 标签调用

问题描述

我在关注这个例子：

https://vuejs.org/v2/cookbook/packaging-sfc-for-npm.html

我想用这个 html 渲染一个名为“flex-text”的 vue 自定义标签：

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>runtime</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script src="/lib/mk-vue-flex-text.js"></script>
  </head>
  <body>
  <flex-text
    name="test"
    value="text"></flex-text>
  </body>
</html>

正在加载“/lib/mk-vue-flex-text.js”的 javascript 代码（说真的，我已经检查过了）。

我的包装代码（基于）如下所示：

import component from '../src/mk-vue-flex-text.vue';

export function install(Vue) {
  if (install.installed) return;
  install.installed = true;
  Vue.component('flex-text', component);
}

const plugin = { install };

// Auto-install when vue is found (eg. in browser via <script> tag)
let GlobalVue = null;
if (typeof window !== 'undefined') {
  GlobalVue = window.Vue;
} else if (typeof global !== 'undefined') {
  GlobalVue = global.Vue;
}
if (GlobalVue) {
  GlobalVue.use(plugin);
}
// To allow use as module (npm/webpack/etc.) export component
export default component;

vue-Component 似乎已正确转换为“mk-vue-flex-text.js”：

var FlexText = (function (exports) {
  'use strict';
  // lots of stuff etc.

  // ...
  // generated app code 
  // ...

  // Import vue component

  // Declare install function executed by Vue.use()
  function install(Vue) {
    if (install.installed) { return; }
    install.installed = true;
    Vue.component('flex-text', __vue_component__);
  }

  //  Create module definition for Vue.use()
  var plugin = {
    install: install,
  };

  // Auto-install when vue is found (eg. in browser via <script> tag)
  var GlobalVue = null;
  if (typeof window !== 'undefined') {
    GlobalVue = window.Vue;
  } else if (typeof global !== 'undefined') {
    GlobalVue = global.Vue;
  }
  if (GlobalVue) {
    GlobalVue.use(plugin);
  }

  exports.default = __vue_component__;
  exports.install = install;

  return exports;

}({}));

所以，在我看来一切都很好。但是组件仍然没有被渲染。

标签： vue.jsvue-componentrollup

解决方案

推荐阅读