vue 的 vue-dat-gui 不适用于 "Cannot read property '_c' of undefined" 错误消息

Question

我正在尝试在 Vue3 环境中 dat.gui。我为 Vue 找到了 npm dat.gui。根据文档，它说我需要在 main.js 和 app.use(GUI) 中导入它，然后我可以将它用作全局组件。

我的做法如下

main.js

import DatGui from '@cyrilf/vue-dat-gui'

const app = createApp(App);
app.use(router)
app.use(DatGui)

在我的一个组件中

    <div class='horizontal-container dark-background white-text' v-if='showup' ref='container'>
        <canvas id='myCanvas' ref='myCanvas'></canvas>
        <div class='menu-text white-text medium medium-text'>This is Landing Page</div>
        <year-select class='year-selection'></year-select>
        <div>{{boroughData}}</div>
    </div>
    </transition>

<dat-gui closeText="Close controls" openText="Open controls" closePosition="bottom">
    
        <dat-number v-model="cameraZ" :min="0" :max="5" :step="0.5" />
        <dat-number v-model="maxRadius" :min="1" :max="5" :step="0.1"/>
        <dat-number v-model="spacing" :min="1" :max="10" :step="0.5" />

</dat-gui>


  data(){
      return{
          showup:false,
          sRadius:2,
          targetCounty:undefined,
          mouse:{x:undefined,y:undefined},
          getIntersect:false,
          cWidth:undefined,
          cHeight:undefined,
          cameraZ:5,
          maxRadius:5,
          spacing:5
      }
  },

然后它抛出一条错误消息说

我的 dat.gui 怎么了？

Answer 1

@cyrilf/vue-dat-gui 是 built for Vue 2, so you need to use the Vue 3 migration build 让库在您的项目中工作。

设置您的 Vue CLI 脚手架项目：

安装与您的 Vue 构建版本匹配的 Vue 兼容性构建和 SFC 编译器（即，安装 @vue/compat@^3.1.0 和 @vue/compiler-sfc@^3.1.0 如果 vue@^3.1.0 在 package.json):
```
npm i -S @vue/compat@^3.1.0
npm i -S @vue/compiler-sfc@^3.1.0
```

将 Webpack 配置为别名 vue 到 @vue/compat 构建，并将 vue-loader 的兼容模式设置为 Vue 2:

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set('vue', '@vue/compat')

    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        return {
          ...options,
          compilerOptions: {
            compatConfig: {
              MODE: 2
            }
          }
        }
      })
  }
}

demo

vue 的 vue-dat-gui 不适用于 "Cannot read property '_c' of undefined" 错误消息

vue-dat-gui for vue doesn't work with "Cannot read property '_c' of undefined" error message

vue.js

vuejs3

dat.gui