Javascript 使用Vue获得圆锥形渐变多边形填充

我正试图在我的Vue.js项目中实现：

我正在使用Vue CLI实例化的Vue，它带有单文件组件和网页包

描述似乎很简单，包括两个脚本标记，bam它可以工作

我已经在我的项目中添加了conic gradient NPM包（

添加conic gradient

），它既获取了conic gradient脚本，也获取了所需的prefixfree

然后，我在main.js中尝试了干式导入：

导入“圆锥梯度”

以及

从“圆锥梯度”导入圆锥梯度

然后打电话：

Vue.use（圆锥梯度

我还在我的组件（dome.vue）中尝试了干式导入

但是，似乎没有任何东西可以渲染圆锥梯度。我做错了什么？

不是Vue插件，因此您不能只执行

Vue。使用它。
作者发布了一个失败的npm包，它既不是ES6模块（很抱歉延迟通知），因此您不能使用
导入ConicGradient…

既然您说您的项目是用Vue CLI生成的，那么您必须找到
src/main.js
文件，并将您的
import conicgradent 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
并将其粘贴在你的身体结束标记
之前（下载该文件并提供本地副本）


现在，在Vue组件中，您可以使用
new window.conicgradent（{…}）

工作片段

Vue.config.productionTip=Vue.config.devtools=false
新Vue({
el:“#应用程序”，
数据：{
渐变：新窗口。圆锥渐变({
停止：“红、黄、青、水、蓝、品红、红”，
尺码：100
})
}
})

所以我需要在main.js以及我使用的每个组件中进行导入？我不想在整个应用程序中使用不同的渐变来淹没我的main.js文件。你只需在需要使用它的组件中导入它。如果你不是在
main.js
文件中使用它，而是在另一个组件中使用它，那么我就不要导入它n
main.js
文件。虽然您会发现自己在各种组件中“导入”了它，但webpack在这里负责，代码不会“重复”。它被导入了很多次，但只加载了一次。这就是ES6模块的工作方式！如果我这样做：从“圆锥梯度”导入圆锥梯度导出默认值{name:'dome'，data（）{return{gradient:new ConicGradient（{stops:'gold 40%，#f060'}}}}我得到一个错误[Vue warn]：数据中的错误（）：“TypeError:u WEBPACK_IMPORTED_MODULE_0_conic_gradient_udefault.a不是构造函数”糟糕的是，我没有意识到这个包不是es6准备好的。它发布在npm注册表中，但你不能像导入es6模块一样导入它。我只是用另一种方法编辑了我的答案，因为元素是在库注入“css polyfil”后装入的我相信。您还需要知道您在cli生成的项目中使用的是webpack。因此，您最好为css查找webpack解决方案。