用Nuxt / Vue加载D3

d3.js Vue.js

伽罗理查德

2020-03-23

我正在尝试在使用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>

有人能够指出我做错了什么吗?

第2872篇《用Nuxt / Vue加载D3》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
小卤蛋凯 2020.03.23

对于任何来此页面寻求解决方案的人,来自GitHub上 piyushchauhan2011的这些建议使我朝着正确的方向前进-

我要做的就是将d3导入到我的单个文件组件中,然后仅在d3mounted()这样的地方使用d3进行任何dom操作

在这之前,我当然必须使用yarn add d3(或npm install d3 --save将d3添加到我的项目中

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android