vue 的 vue-dat-gui 不适用于“无法读取未定义的属性‘

问题描述

我正在尝试在 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 有什么问题？

解决方法

@cyrilf/vue-dat-gui 是 built for Vue 2，因此您需要使用 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

dat.gui vue.js vuejs3

vue 的 vue-dat-gui 不适用于“无法读取未定义的属性‘_c’”错误消息

问题描述

解决方法