从CDN导入并使用Vue.js包

Question

我正在从 CDN 导入 Vue.js 和 Vue-Toastify 以在 SPA 上使用。我只需要几个反应性组件，因此从 CDN 导入。

Vue Toastify

我对 Vue 相当陌生，正在尝试使用 CDN // 而不是从 npm 安装和导入来使用 Vue-Toastify。我有正确的 CDN 链接，但如何导入它以在 .vue 文件中使用。由于我还没有创建 Vue.js 项目，所以没有 main.js 文件，也无法使用 import 方法。

这有可能吗？如果我 console.log(window) 我可以在模块列表中看到 VueToastify 但我无法从我的 .vue 文件使用或访问它。

代码示例 目前通过 CDN 安装：

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-toastify@latest"></script>

但是我遇到的问题是将其添加到我的 .vue 文件中。目前我有：

let contactForm = new Vue({
    delimiters: ['[[', ']]'],
    el: '#contact-form',
    data: {
        form: new Form({
            name: '',
            email_address: '',
            message:''
        })
    },
    methods: {
        submit(){
            let formdata = new FormData()
            formdata.append('name', this.form.fields.name)
            formdata.append('email_address', this.form.email_address)
            formdata.append('message', this.form.fields.message)
            axios.defaults.xsrfCookieName = 'csrftoken'
            axios.defaults.xsrfHeaderName = "X-CSRFTOKEN"
            axios.post('/', formdata)
                .then((response) => {
                    if (response.data.status !== 200){
                        this.form.errors.set(response.data.errors)
                        console.log(window['vue-toastify'])
                    } else {

                    }
            })
        }
    },
})

我想为大家的回应干杯。这是在一个文件中，其中包含几个用于表单和表单错误的类，并且 vue 开发工具是唯一启用的东西。

Answer 1

在您的情况下，您不能使用

.vue

文件，而只能使用

.js

文件。

由于

VueToastify

将模块导出为插件（某些库可能导出为组件，您可以从导出的对象中指示它，对于插件，它将具有

install

功能）。所以你必须先安装它。

Vue.use(window['vue-toastify'].default)

然后你想使用的时候调用它就可以了。

this.$vToastify.success('some-text')

示例