从 CDN 导入并使用 Vue.js 包

Question

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

我是 Vue 的新手，我正在尝试通过 CDN // 使用 Vue-Toastify，而不是从 npm 安装和导入。我有正确的 CDN link 但我如何导入它以在 .vue 文件中使用。因为我还没有创建 Vue.js 项目，所以我没有 main.js 文件，也不能使用导入方法。

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

代码示例当前通过 cdn 安装：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></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')

Example

从 CDN 导入并使用 Vue.js 包

Import and use Vue.js package from CDN

components

cdn

package

vue.js