无法从 CDN 使 vue-slick-carousel 工作

问题描述

我正在尝试使用 CDN 脚本在一个非常小的应用程序中使用它:

I'm trying to use it in a very small app using the CDN script:

https://unpkg.com/vue-slick-carousel

没有成功.

我是 vue.js 的新手，我不确定是否必须导入它或其他任何东西.文档说我必须导入它:Vue-slick-carousel

I'm new to vue.js and I'n not sure if I have to import it or anything.The documentation says I have to import it: Vue-slick-carousel

它应该是这样的，但我不能让它工作:

IT should be like this but I can't make it work:

  import VueSlickCarousel from 'vue-slick-carousel'
  // optional style for arrows & dots
  import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'

  export default {
    name: 'MyComponent',
    components: { VueSlickCarousel },
  }

测试在这个 codepen

我错过了什么吗?

推荐答案

您不能像以前那样从 CDN 脚本导入".您可以访问 window 变量并将其分配给组件.通过使用 CDN，它会绑定到窗口.

You can't 'import' from a CDN script in the way you've done. You can access the window variable and assign it to the component. By using a CDN, it becomes bound to the window.

所以 components: { VueSlickCarousel : window['vue-slick-carousel'] } 没有 import VueSlickCarousel from 'vue-slick-carousel' 将解决该部分你的问题.

So components: { VueSlickCarousel : window['vue-slick-carousel'] } without the import VueSlickCarousel from 'vue-slick-carousel' would solve that portion of your question.

问题在于，示例中引用的代码用于打包安装，而不是 CDN.如果你可以通过npm install vue-slick-carousel或者yarn add vue-slick-carousel安装，那么这些问题都会自行解决.

The issue is that, the code referenced in the example is for packaged installs, and not a CDN. If you can install via npm install vue-slick-carousel, or yarn add vue-slick-carousel, then these problems would resolve themselves.

如评论中所述，该组件在您的 HTML 中应该是 kebab-case.... </vue-slick-carousel> 而不是 ... </VueSlickCarousel>

As mentioned in the comments, the component should be kebab-case in your HTML. <vue-slick-carousel> ... </vue-slick-carousel> instead of <VueSlickCarousel> ... </VueSlickCarousel>

这符合 Vue 文档中提供的样式指南 见这里

This is in line with the style guide provided in the Vue docs seen here

在大多数项目中，组件名称在单文件组件和字符串模板中应始终为 PascalCase - 但在 DOM 模板中为 kebab-case.

这篇关于无法从 CDN 使 vue-slick-carousel 工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！