Question

我的旧应用程序中有一些旧的自定义类。此类的定义如下：

/** @namespace MyClass */
"use strict";

var MyClass = (function () {
    var Constr = {};

    Constr.func1 = function () {...};
    ...
    Constr.funcN = function () {...};

    return Constr;

}());

在我的应用程序中，我以老式方式导入此类：

<head>
    <script src="./static/MyClass.js"></script>
    ...
</head>

现在，我尝试并喜欢VueJS框架。我想要实现的是将旧的旧类导入到新应用程序中。我不喜欢以旧的方式将其导入index.html中，但是我想在我的自定义Vue组件中进行导入。因此，在我的TestComponent.vue中，我希望能够执行以下操作：

import MyClass from './static/MyClass.js' // or from './assets/MyClass.js' ?

但是我不确定，我该怎么做。

Answer 1

由于您要尝试<build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-resources-plugin</artifactId> <version>3.0.1</version> <executions> <execution> <id>filter-resources</id> <phase>process-resources</phase> <goals> <goal>copy-resources</goal> </goals> <configuration> <outputDirectory>${project.build.directory}</outputDirectory> <resources> <resource> <directory>src/main/resources</directory> <includes> <include>../rest-api/src/main/resources/xcs-${xcs.rest.api.version}.yaml</include> </includes> </resource> </resources> </configuration> </execution> </executions> </plugin> <plugin> <groupId>com.coderplus.maven.plugins</groupId> <artifactId>copy-rename-maven-plugin</artifactId> <version>1.0</version> <executions> <execution> <id>copy-and-rename-file</id> <phase>compile</phase> <goals> <goal>rename</goal> </goals> <configuration> <sourceFile>../rest-api/src/main/resources/xcs-${xcs.rest.api.version}.yaml</sourceFile> <destinationFile>${project.build.directory}/xcs.yaml</destinationFile> </configuration> </execution> </executions> </plugin> </plugins> </build>，因此必须import来export中的班级。无需IIFE，因为您将处于模块范围内，而不是全局范围内，因此无需担心全局污染：

myClass.js

也就是说，这里只有带有属性的普通对象，而不是类，因此最好不要将其命名为// MyClass.js export default const Constr = {}; Constr.func1 = function () {...}; Constr.funcN = function () {...};。

Answer 2

您需要导出您的课程。

export default MyClass

应该做到这一点。这需要在脚本中添加。之后，您可以将其导入。导入的var可以具有任何名称，它不受限于MyClass。

如何准备此遗留类以导入到VueJs应用程序？

2 个答案: