Question

我使用了angularjs（1.x）和Vue的新手。角度中有DI并且在控制器中引用服务或模板中的指令很容易，无论服务或指令在哪里。 Angular将帮助您自动注入它。

但是我意识到Vue通过import(ES6)引用组件路径其中的组件。如果我在重构（经常）时更改组件 direcotry结构，会丢失组件引用，我应该逐个修复路径。它有多麻烦。

我知道有vue-injector像角度DI，但是它是否易于使用？

Answer 1

如果你认为你要重组很多，你可以拥有一个每个人都进口的文件，然后导入所有其他文件，这样你只需要在一个地方进行更改。

我个人更喜欢导入而不是依赖注入，更容易理解所有内容的来源。

Answer 2

Vue没有提供任何正式的依赖注入机制。完全由您决定如何导入依赖项。

大多数Vue代码示例根本不使用依赖注入，只需通过import和export使用ES6模块系统。

如果我在重构（经常）时更改组件direcotry结构，则会丢失组件引用，我应该逐个修复路径。它有多麻烦。

您可能不应经常更改目录结构。查看Vue webpack template以获取有关如何正确构建Vue项目的示例。

话虽如此，它并没有真正回答你的问题。你使用webpack（或类似的东西）？您可以通过resolve配置属性精确配置webpack如何定位模块，这样您就不必使用相对导入路径。

另一种方法是register each Vue component globally，因此您根本不需要导入它们。

另一种方法是通过创建一个components.js模块来滥用ES6模块，该模块导入每个Vue组件（无论它们在哪里）并从那个模块中导出它们。现在您只需要从该中央模块导入，而不是搜索您要导入的每个项目的特定模块位置。

// components.js

import Button from 'path/to/button.vue';
import Alert from 'path/to/alert.vue';

export {
    Button,
    Alert,
};

// myform.js

import { Button } from 'path/to/components.js';

如果您更改button.vue的位置，则只需更新components.js文件中的导入。