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'),
  }
})

但是，我没有将Web应用程序构建为完整的Vue应用程序。我使用了Django的模板功能，并且仅在每个页面上将Vue添加为附件：

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

如何使用上述组件？非常感谢！

Answer 1

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

我将提出以下步骤：

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

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

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

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

当您仅将Vue添加为页面加载项（<script>）时，如何使用Vue'组件'？

1 个答案: