Question

我想捆绑在Vue中编写的几个组件。去做因此我将Rollup与index.js文件（我称之为Rollup的文件）一起使用，如下所示：

import ComponentA from './components/ComponentA'
import ComponentB from './components/ComponentB'

var myMod = {
  ComponentA: ComponentA,
  ComponentB: ComponentB
}

window.myMod = myMod

然后捆绑到main.js中。

我现在可以将模块包含在带有普通<script src="main.js">标签的HTML页面中。

现在，我可以在这里定义使用模块组件的组件，例如

ComponentA = myMod.ComponentA
app = new Vue({
  el: '#app',
  components: { ComponentA },
  // components: myMod, also works if I want to use all the components
  template: ` ...<ComponentA/>...`
})

直到最近，这对我来说还是很好。

我想知道我现在可以在模块外部的单个文件vue组件中使用组件模块了（例如，如果我想使用vue-cli-3创建站点）。

例如

<template>...</template>
<script>
import myMod from 'main.js'
ComponentA = myMod.ComponentA
export default {
  name: 'SFCInAnotherApp',
  components: { ComponentA },
}
</script>
<style>...</style>

我尝试将index.js文件更改为：

export default myMod

而不是window.myMod

但是，现在当我导入组件时，模块是未定义的。

例如

<template>...</template>
<script>
import myMod from 'main.js'
console.log(myMod)
ComponentA = myMod.ComponentA
export default {
  name: 'SFCInAnotherApp',
  components: { ComponentA },
}
</script>
<style>...</style>

----> undefined

如果我保留window.myMod = myMod行，则页面呈现后（由于尝试使用myMod组件的应用程序出现错误），我当然可以毫无问题地访问myMod。

如何使用rollup创建组件的集合，然后可以从其他vue项目中通过以下任一方式导入组件：

import {componentA} from '<path-to-myMod>'

或

import myMod from '<file-with-my-mod>'
var ComponentA = myMod.ComponentA

简而言之：

使用Rollup，我应该如何在index.js文件中导入Vue组件并导出模块，以便可以像现在一样使用它，也可以将其导入到单个文件中。文件组件？

Vue和汇总：如何捆绑组件集合？

0 个答案: