这可能是不言而喻的,但我没有找到任何说明我正在尝试做的事情的例子(也许我只是做错了)。我正在将 Vue 添加到现有的 ASP.NET Core MVC 应用程序,并将 JavaScript 语句直接添加到页面有效,但是当我尝试迁移到 TypeScript 文件时,没有任何反应。
JavaScript 是:
new Vue({
el: "#productPage",
data: {
isLoading: true
},
methods: {
},
mounted () {
console.log("mounted()");
this.isLoading = false;
}
});
这按预期工作。将代码迁移到 TypeScript 文件productPage.ts
:
import Vue from 'vue';
new Vue({
el: "#productPage",
data: {
isLoading: true
},
methods: {
},
mounted () {
console.log("mounted()");
this.isLoading = false;
}
});
产生:
(function (factory) {
if (typeof module === "object" && typeof module.exports === "object") {
var v = factory(require, exports);
if (v !== undefined) module.exports = v;
}
else if (typeof define === "function" && define.amd) {
define(["require", "exports", "vue"], factory);
}
})(function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var vue_1 = require("vue");
var HonestyBox;
(function (HonestyBox) {
new vue_1.default({
el: "#productPage",
data: {
isLoading: true
},
methods: {},
mounted: function () {
console.log("Mounted !!!!");
this.isLoading = false;
}
});
})(HonestyBox || (HonestyBox = {}));
});
//# sourceMappingURL=productPage.js.map
并包括生成的 javascript 文件productPage.js
:
<script src="~/js/productPage.js"></script>
这没有任何作用。单步调试调试器中的任何一个条件function(factory)
都不满足。控制台告诉我,You are running Vue in development mode.
但包含的 JavaScript 无法运行。该tsconfig.json
用于生成JavaScript文件:
{
"compileOnSave": true,
"compilerOptions": {
"module": "umd",
"moduleResolution": "node",
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": true,
"sourceMap": true,
"target": "es5",
"outDir": "wwwroot/js"
},
"include": [
"Typescript/**/*"
],
"exclude": [
"node_modules",
"wwwroot"
]
}
使用"module": "commonjs"
的结果ReferenceError: exports is not defined
。我希望避免使用 Browserify 或 Webpack。
如果我理解正确,您可以在 productPage.js 之前在单独的脚本标签中添加 Vue。
这意味着你不能在你的 TypeScript 文件中导入 Vue,但你需要声明 Vue,这样模块就假设 Vue 已经被加载(在你的 TS 模块之外)。
declare const Vue; // this replaces your Vue import statement
如果你想稍后添加一个打包器,你需要删除加载 Vue 的脚本标签,只采用模块化方法:Vue 需要使用 import 语句导入,以便打包器知道他必须包含所有 Vue。然后您将拥有一个单一的 JS 文件(或者如果您的打包器将其拆分:多个 JS 文件)。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句