当你只将Vue添加为页面附加组件(<script>)时，如何使用Vue‘组件’？

Question

我想使用一个名为vue-timeago的vue组件

import VueTimeago from 'vue-timeago'

Vue.use(VueTimeago, {
  name: 'Timeago', // Component name, `Timeago` by default
  locale: undefined, // Default locale
  locales: {
    'zh-CN': require('date-fns/locale/zh_cn'),
    'ja': require('date-fns/locale/ja'),
  }
})

然而，我并没有把我的webapp构建成一个完整的Vue应用。我使用了Django的模板函数，只在每个页面上添加了Vue作为附加组件：

<script>
    let app = new Vue({
        delimiters: ['[[',']]'],
        el: '#app',
        data: {
           
        },
        ...

如何使用上面提到组件？非常感谢!

Answer 1

理论上，您可以将属性type="module"添加到脚本标记中，然后从文件中导入组件，但在这种情况下，您应该手动处理所有依赖项。显然，这很难做到，使用捆绑器来自动化这部分工作会更实用。

我建议采取以下步骤：

1. 创建包含以下内容的source.js：

import Vue from 'vue'
import VueTimeago from 'vue-timeago'

let app = new Vue({
        delimiters: ['[[',']]'],
        el: '#app',
        components: {
           'Timeago': VueTimeago
        },
        data: {
           
        },
        ...

1. 使用您选择的任何捆绑程序将source.js编译为bundle.js。页面上的
2. 链接bundle.js文件：<script src="bundle.js"></script>