我已经花了 2 天时间对此进行试验，到目前为止还没有取得任何进展。我有一个非常基本的 ASP.NET Core 网站，为 Typescript 2.9 配置。我希望我的前端非常简单，每个页面只有一个 vue 应用程序，没有复杂的构建系统或组件。
我希望获得某种最低限度的配置。这是我当前的 tsconfig.json 文件:
{
"compilerOptions": {
"declaration": true,
"mapRoot": "/js/",
"module": "esnext",
"removeComments": true,
"sourceMap": true,
"target": "esnext"
},
"compileOnSave": true
}
(注意，我已经尝试过 es6、es5 模块，但都没有)
然后，在我的 wwwroot/js 文件夹中，我有 Site.ts，如下所示:
import { Vue } from "./types/vue";
var _mixin: any;
var _vue = new Vue({
el: '#vueheader',
mixins: [_mixin],
data: {
},
methods: {},
mounted: function () {
},
});
在 wwwroot/js/types 文件夹中，我有来自 vue 的 5 个 d.ts 文件，以及 vue.js 文件。 typescript 正确编译成一个 js 文件，但是当我访问主页时，我在 chrome 中收到错误提示“404，找不到文件/types/vue”
这里是编译后的 Site.js:
import { Vue } from "./types/vue";
var _mixin;
var _vue = new Vue({
el: '#vueheader',
mixins: [_mixin],
data: {},
methods: {},
mounted: function () {
},
});
//# sourceMappingURL=/js/Site.js.map
我的 html 有这个链接:
有人有什么想法吗？请不要让我使用像 webpack 这样复杂的构建系统。我不想让 600 多个依赖项使我的构建过程变得臃肿。
最佳答案
这实际上非常简单!我基于我的第一个使用 Require.js 的 Vue TodoMVC 风格的应用程序。您可以为自己的项目进行推断。
最简单的方法是使用不需要捆绑的加载程序，例如 Require.js 或 System.js - 您所要做的就是使用 TypeScript 进行编译。
因为我使用的是 Require.js 和 Vue，所以这是我的 package.json
{
"name": "vue-tutorial",
"version": "1.0.0",
"dependencies": {
"@types/requirejs": "^2.1.28",
"vue": "^2.1.4"
}
}
接下来，我要添加一个tsconfig.json
{
"compilerOptions": {
"outFile": "./built/app.js",
"noImplicitAny": true,
"strictNullChecks": true,
"noImplicitThis": true,
"module": "amd",
"moduleResolution": "node",
"esModuleInterop": true,
"lib": [
"dom", "es2015"
],
"types": [
"requirejs"
]
},
"include": [
"src"
]
}
让我们分解一下:
outFile:TypeScript 会有效地将您的源代码打包到一个文件中(但不是它的依赖项!)。noImplicitAny、strictNullChecks、noImplicitThis:只是一些特定的--strict选项我强烈建议你打开至少。module: amd:AMD 是 Require.js 可以理解的模块格式。moduleResolution: node:这使得 TypeScript 可以轻松地从node_modules中获取.d.ts文件。esModuleInterop:这允许我们使用现代语法导入 Vue。lib:指定您希望在运行时拥有的标准 API。types:.d.ts文件用于我们不一定要导入的库；我们不导入 Require.js，因为我们希望它在全局范围内可用。
现在我们的index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello Vue!</title>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/requirejs@2.3.5/require.js"></script>
<script src="./built/app.js"></script>
</body>
</html>
让我们在 src/components/GreetingComponent.ts 中创建我们的第一个组件:
import Vue from "vue";
export default Vue.extend({
template: `<div>Hello {{name}}!</div>`,
props: ["name"],
});
接下来，让我们创建一个index.ts:
import Vue from "vue";
import GreetingComponent from "./components/GreetingComponent";
new Vue({
el: "#app",
template: `<greeting-component name="Steve"></greeting-component>`,
components: {
GreetingComponent
}
});
最后让我们创建一个 Bootstrap 来实际导入您的 require-config.ts:
require.config({
paths: {
// JS library dependencies go here.
// We're using a CDN but you can point to your own assets.
"vue": "https://unpkg.com/vue@2.5.16/dist/vue",
}
});
require(["index"]);
解释:
paths将告诉 Require.js 在您使用裸路径导入 Vue 和其他库时在哪里寻找它们。您可以自定义 Require.js 将在何处找到 Vue，但请记住您必须省略 URL 末尾的.js。- 最后调用
require将加载您的index模块以启动您的程序。
运行 tsc，打开 index.html，一切正常!
关于typescript - 如何在没有复杂构建系统的情况下将 Vue 与 Typescript 一起使用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50649516/