Question

我遵循了注册和使用自定义元素的说明：

https://alligator.io/vuejs/custom-elements/

我正在使用Vue的标准Webpack模板。

当我跑步时

border

我希望在dist目录中获得一个名为element.js的打包Web组件文件。但是没有任何事情发生。有谁知道是否需要额外的步骤？文档没有说明这一点。

这在我的项目中产生了以下文件：

border-radius

main.js

npm run build

组件/ example.vue

<template>
  <div id="app">
    <example myProp="I can pass props!"></example>

  </div>
</template>

<script>
import Example from './components/example.Vue'

export default {
  name: 'app',
  components: {
    Example
  }
}
</script>

<style>
</style>

的package.json

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import vueCustomElement from 'vue-custom-element'

Vue.config.productionTip = false

Vue.use(vueCustomElement);
/* eslint-disable no-new */

import Example from './components/Example.vue';

// Configure Vue to ignore the element name when defined outside of Vue.
Vue.config.ignoredElements = [
    'example-component'
];

// Enable the plugin
Vue.use(vueCustomElement);

// Register your component
Vue.customElement('example-component', Example, {
    // Additional Options: https://github.com/karol-f/vue-custom-element#options
});


new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

在包含自定义元素和vue库的脚本文件之后，我的index.html如下所示：

<template>
  <p>Dynamic prop value: {{myProp}}</p>
</template>

<script>
export default {
  props: ['myProp']
}
</script>

Answer 1

docs和alligator.io文章没有解释它，但是为了工作，vue-custom-element仍然需要Vue.js和vue-custom-element库。

所以你必须使用webpack在<script>中生成的index.html包含。

找到一个教程，提到： http://vuetips.com/vue-web-components

此实现需要Vue.js核心文件和要包含在页面中的vue-custom-element库。

它还提到https://github.com/kartsims/vue-customelement-bundler这是一个将所有内容构建到单个.js文件中的模板。

Vue Custom Element无法在Dist中构建独立的JS文件

1 个答案: