我正在尝试在使用Nuxt构建的应用程序中实现D3。我已经成功将其导入到本<script>
节的视图中,import * as d3 from 'd3'
因为d3.select(...)
由于缺少浏览器,正在渲染应用程序服务器端D3的功能(即)。在Nuxt插件文档中,它建议了仅客户端外部插件的模式:
module.exports = {
plugins: [
{ src: '~plugins/vue-notifications', ssr: false }
]
}
我试图在nuxt.config.js
我的项目中实施模式:
module.exports = {
head: {
title: 'My Demo App',
meta: [...],
link: [...]
},
loading: {...},
plugins: [
{ src: '~node_modules/d3/build/d3.js', ssr: false}
]
}
但是D3会花ReferenceError
一会儿寻找,document
而Nuxt会SyntaxError
在控制台中向抛出一个指向的插件字段中的内容nuxt.config.js
。
供参考demo.vue
:
<template>
<div class="demo-container"></div>
</template>
<script>
import * as d3 from 'd3';
d3.select('.demo-container');
</script>
有人能够指出我做错了什么吗?
对于任何来此页面寻求解决方案的人,来自GitHub上 piyushchauhan2011的这些建议使我朝着正确的方向前进-
我要做的就是将d3导入到我的单个文件组件中,然后仅在d3
mounted()
这样的地方使用d3进行任何dom操作在这之前,我当然必须使用
yarn add d3
(或npm install d3 --save
)将d3添加到我的项目中。