Question

概述在main.js中，添加

import Three from 'three'

Vue.use(Three)

使用npm run dev启动dev服务器。预期的行为 Vue项目应该加载没有错误。实际行为开发服务器发出此警告：

warning  in ./src/main.js
    7:8-14 "export 'default' (imported as 'Three') was not found in 'three'

浏览器的js控制台显示错误：

Uncaught TypeError: Cannot read property 'installed' of undefined
at Function.Vue.use (eval at <anonymous> (app.js:723), <anonymous>:3443:15)
at eval (eval at <anonymous> (app.js:778), <anonymous>:14:45)
at Object.<anonymous> (app.js:778)
at __webpack_require__ (app.js:660)
at fn (app.js:84)
at Object.<anonymous> (app.js:964)
at __webpack_require__ (app.js:660)
at app.js:709
at app.js:712

Answer 1

这是因为ThreeJS库中没有默认导出，所以你可以导入这样的所有内容：

import * as Three from 'three';

此外，您不需要Vue.use，因为这不是VueJS插件。

由于没有默认导出，您可以从ThreeJS导入特定部分，如下所示：

import { Scene } from 'three';

Answer 2

你不能直接使用Three.js，你需要一个Vue包装器，你可以找到一个here

如果您想直接使用它，您有几种选择：

将其导入每个文件并使用它：

import Three from 'three'
Three.doSomething

将其导入主文件并将其放在窗口对象上：
```
window.Three = require('Three');
```

将其添加到Vue实例（首选方式）：

 import Three from 'three';
 Object.definePrototype(Vue.prototype, '$three', { value: Three});

然后您可以像这样引用它：this.$three

'三'中未找到导出'默认'（导入为'三'）

2 个答案: