Ste*_*eve 5 typescript vue.js asp.net-core
我花了两天时间试验这个,到目前为止还没有取得任何进展.我有一个非常基本的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中得到错误"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 可以轻松地从 中获取.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
}
});
最后让我们创建一个引导程序来实际导入您的 at 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当您使用裸路径导入 Vue 和其他库时，将告诉 Require.js 在哪里查找它们。您可以自定义 Require.js 将在哪里找到 Vue，但请记住您必须省略.jsURL 末尾的 。require最后的调用将加载您的index模块以启动您的程序。运行tsc，打开index.html，一切就应该正常了！
| 归档时间： |
|
| 查看次数： |
772 次 |
| 最近记录： |