时间戳

首页 > 解决方案 > 如何在没有复杂构建系统的情况下使用 Vue 和 Typescript？

typescript - 如何在没有复杂构建系统的情况下使用 Vue 和 Typescript？

问题描述

我已经花了 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 文件。打字稿正确编译成 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 多个依赖项使我的构建过程变得臃肿。

标签： typescriptasp.net-corevue.js

解决方案

我正在使用 Vue3 并为我完成以下工作：

添加一个vue.d.ts

import Vue from "vue"
export = Vue;
export as namespace Vue;

修改tsconfig.json设置

{
  "compilerOptions": {
    "module": "UMD", 
    "moduleResolution": "node", 
    "esModuleInterop": true, 
    "skipLibCheck": true, 
  }
}

我的package.json

{
  "name": "test",
  "version": "1.0.0",
  "dependencies": {
    "vue": "^3.0.2"
  }
}

我的test.ts

const App = {
    data() {
        return {
            counter: 0,
        };
    },
};

Vue.createApp(App).mount("#app");

生成test.js

var App = {
    data: function () {
        return {
            counter: 0
        };
    }
};
Vue.createApp(App).mount("#app");

没有错误。

推荐阅读