获取 conic-gradient polyfill 以与 Vue 一起使用

Question

我正在尝试在我的 Vue.js 项目中实现 this Polyfill：

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="conic-gradient.js"></script>

我正在使用带有单个文件组件和 webpack 的 Vue-CLI 实例化的 Vue。

描述看起来很简单，包括两个脚本标签，然后就可以了。

我已将 conic-gradient NPM 包添加到我的项目 (yarn add conic-gradient) 中，它同时获取 conic-gradient 脚本以及所需的 prefixfree。

然后我继续尝试在我的 main.js 中进行干式导入：

import 'conic-gradient'

还有

import conic-gradient from 'conic-gradient'

然后调用：

Vue.use(conic-gradient

我也尝试过在我的组件 (dome.vue) 中进行干式导入

然而，似乎没有任何东西可以渲染圆锥渐变。我究竟做错了什么？

Answer 1

Conic-Gradient 不是一个 Vue 插件，所以你不能只用它来做Vue.use。 既不是 ES6 模块（抱歉通知晚了）所以你不能使用import ConicGradient...，作者发布了一个失败的 npm 包。

既然你说你的项目是用Vue-CLI生成的，那你一定要找到src/main.js文件，把你的import ConicGradient from 'conic-gradient'放在最上面。

然后你就可以开始使用它了

import ConicGradient from 'conic-gradient'

new Vue({
    data: {
        gradient: new ConicGradient({
            stops: 'gold 40%, #f06 0',
            repeating: true,
            size: 400
       });
    }

})

转到您的 index.html 并将其粘贴到您的正文结束标记 </body> 之前（下载该文件并提供本地副本）

<script src="https://cdn.rawgit.com/LeaVerou/conic-gradient/609dc5f4/conic-gradient.js"></script>

现在你可以在你的 Vue 组件中使用new window.ConicGradient({ ... })

一个工作的 sn-p

Vue.config.productionTip = Vue.config.devtools = false

new Vue({
  el: '#app',
  data: {
    gradient: new window.ConicGradient({
      stops: 'red, yellow, lime, aqua, blue, magenta, red',
      size: 100
    })
  }
})

<script src="https://cdn.rawgit.com/LeaVerou/conic-gradient/609dc5f4/conic-gradient.js"></script>
<script src="https://unpkg.com/vue@2.5.16"></script>

<div id="app">
  <img :src="gradient.png" style="border-radius: 50%" />
</div>