Question

我花了两天时间试验这个，到目前为止还没有取得任何进展。我有一个非常基本的ASP.NET核心网站，为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中得到错误＆＃34; 404，找不到文件/ types / vue＆＃34;

这是编译的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多个依赖项。

Answer 1

这实际上非常简单！我基于我的第一个使用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可以轻松地从.d.ts中选取node_modules个文件。
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
    }
});

最后让我们创建一个引导程序来实际导入你的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，事情就可以了！

Answer 2

我正在使用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");

没有错误。

如何使用Vue与Typescript，没有复杂的构建系统？

2 个答案: