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。

描述看起来很简单，包括两个脚本标签和bam它的工作原理。

我已经将conic-gradient NPM包添加到我的项目（yarn add conic-gradient）中，该项目同时获取了conic-gradient脚本以及所需的前缀。

然后我继续在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({ ... })

一个工作片段

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>

获得圆锥曲线polyfill与Vue一起使用

1 个答案:

一个工作片段